js的回調(diào)函數(shù)與異步

CntChen 發(fā)布于2019-08-23 13:06 / 2548人閱讀

摘要：首先要知道的是，回調(diào)和異步不是同一個東西我以前認(rèn)為中每個回調(diào)函數(shù)都是異步處理的，實際上并不是，可以同步回調(diào)，也可以異步回調(diào)例子說到，大家都在中遇到以下的例子這些代碼用了這么久，知道怎么用，但是可能對回調(diào)的概念并不是那么清晰再來個例子執(zhí)行函數(shù)

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

callback 例子

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

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

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

再來個例子

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 原理

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

callback 用 C++ 實現(xiàn) 不帶參數(shù)回調(diào)

#include 
using namespace std; 

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

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

//在main函數(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;
}

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

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

本文同步更新我的個人博客https://blog.yjqing.xin/js-ca...