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

創(chuàng)新互聯(lián)公司提供高防物理服務(wù)器租用、云服務(wù)器、香港服務(wù)器、成都聯(lián)通服務(wù)器托管等

首先要知道的是，回調(diào)和異步不是同一個(gè)東西
我以前認(rèn)為js中每個(gè)回調(diào)函數(shù)都是異步處理的，實(shí)際上并不是，可以同步回調(diào)，也可以異步回調(diào)

callback 例子

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

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

這些代碼用了這么久，知道怎么用，但是可能對(duì)回調(diào)的概念并不是那么清晰

再來個(gè)例子

function a(callback) 
{
    alert("執(zhí)行parent函數(shù)a！"); 
    alert("開始調(diào)用回調(diào)函數(shù)"); 
    callback(); 
    alert("結(jié)束回調(diào)函數(shù)"); 
}

function b(){ 
    alert("執(zhí)行回調(diào)函數(shù)b"); 
} 

function test() 
{ 
   a(b);
   a(function() { 
        alert("執(zhí)行匿名回調(diào)函數(shù)"); 
   }); 
}
test();

執(zhí)行順序：
執(zhí)行parent函數(shù)a！
開始調(diào)用回調(diào)函數(shù)
執(zhí)行回調(diào)函數(shù)b
結(jié)束回調(diào)函數(shù)

執(zhí)行parent函數(shù)a！
開始調(diào)用回調(diào)函數(shù)
執(zhí)行匿名回調(diào)函數(shù)
結(jié)束回調(diào)函數(shù)

callback 原理

簡(jiǎn)單的說，就是把一個(gè)函數(shù)作為形參進(jìn)行傳遞，上面的callback參數(shù)可以改為任意名字

callback 用 C++ 實(shí)現(xiàn)

不帶參數(shù)回調(diào)

#include 
using namespace std; 

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

//定義實(shí)現(xiàn)回調(diào)函數(shù)的"調(diào)用函數(shù)"
void Call(void (*callback)())
{
    callback();
}

//在main函數(shù)中實(shí)現(xiàn)函數(shù)回調(diào)
int main(int argc,char* argv[])
{
    Call(Print);
    return 0;
}

帶參數(shù)回調(diào)

#include 
using namespace std; 

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

//定義實(shí)現(xiàn)帶參回調(diào)函數(shù)的"調(diào)用函數(shù)"
void Call(void (*callback)(string),string s)
{
    callback(s);
}

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

異步例子

經(jīng)典例子

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

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

a();
b();

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

異步原理

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

以上就是JavaScript中回調(diào)函數(shù)與異步的關(guān)系的簡(jiǎn)略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！