JavaScript中回調函數與異步的關系講解

這篇文章主要為大家詳細介紹了JavaScript中回調函數與異步的關系，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

首先要知道的是，回調和異步不是同一個東西
我以前認為js中每個回調函數都是異步處理的，實際上并不是，可以同步回調，也可以異步回調

callback 例子

說到callback，大家都在javascript中遇到以下的例子

$('#id').on('click', function(){
    //code
});
$('#id').setTimeout(function(){
    //code
},1000);

這些代碼用了這么久，知道怎么用，但是可能對回調的概念并不是那么清晰

再來個例子

function a(callback) 
{
    alert("執行parent函數a！"); 
    alert("開始調用回調函數"); 
    callback(); 
    alert("結束回調函數"); 
}

function b(){ 
    alert("執行回調函數b"); 
} 

function test() 
{ 
   a(b);
   a(function() { 
        alert("執行匿名回調函數"); 
   }); 
}
test();

執行順序：
執行parent函數a！
開始調用回調函數
執行回調函數b
結束回調函數

執行parent函數a！
開始調用回調函數
執行匿名回調函數
結束回調函數

callback 原理

簡單的說，就是把一個函數作為形參進行傳遞，上面的callback參數可以改為任意名字

callback 用 C++ 實現

不帶參數回調

#include <iostream>
using namespace std; 

//定義回調函數
void Print() 
{
    cout <<"Hello World!\n";
}

//定義實現回調函數的"調用函數"
void Call(void (*callback)())
{
    callback();
}

//在main函數中實現函數回調
int main(int argc,char* argv[])
{
    Call(Print);
    return 0;
}

帶參數回調

#include <iostream>
using namespace std; 

//定義帶參回調函數
void Print(string s) 
{
   cout << s << endl;
}

//定義實現帶參回調函數的"調用函數"
void Call(void (*callback)(string),string s)
{
    callback(s);
}

//在main函數中實現帶參的函數回調
int main(int argc,char* argv[])
{
    Call(Print,"Hello World!");
    return 0;
}

異步例子

經典例子

function a(){
    console.log('執行a');
    setTimeout(function(){
        console.log('setTimeout');
    }, 1000);
}

function b(){
    console.log('執行b');
}

a();
b();

執行順序：
執行a
執行b
setTimeout  (一秒后執行)

異步原理

都知道js是單線程的，所謂的單線程就是一次只能完成一個任務，其任務的調度方式就是排隊，毫無疑問，這樣的效率是不高的，后面的任務必須等到前面的任務執行完畢后才能執行，如果有一個比較耗時的操作，比如ajax請求，文件io
其他語言遇到這種比較耗時的任務往往是開一個線程來處理，但js本身就是單線程的，js對這種任務的處理就是這個一個任務掛載起來，等耗時任務完成后再把回調函數添加到執行隊列尾部
所以，在剛剛這個例子中，即使把延遲時間設置為0，也是一樣的結果

以上就是JavaScript中回調函數與異步的關系的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！