關(guān)于js的回調(diào)、同步回調(diào)、異步回調(diào)

BakerJ 發(fā)布于2019-08-20 16:30 / 2174人閱讀

摘要：回調(diào)定義剛開始學(xué)習(xí)時，對回調(diào)函數(shù)的理解僅僅停留在知道定義階段。什么是回調(diào)函數(shù)就是將一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，作為參數(shù)的這個函數(shù)就是回調(diào)函數(shù)。參考文章詳解回調(diào)函數(shù)以為例解讀異步回調(diào)和異步編程的種方法阮一峰的網(wǎng)絡(luò)日志

回調(diào)定義

剛開始學(xué)習(xí)javascript時，對回調(diào)函數(shù)的理解僅僅停留在知道定義階段。什么是回調(diào)函數(shù)？就是將一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，作為參數(shù)的這個函數(shù)就是回調(diào)函數(shù)。至于為什么要用到回調(diào)函數(shù)？回調(diào)函數(shù)有什么作用？當(dāng)時對這些一無所知！最近學(xué)習(xí)node.js涉及到了大量的異步編程，很多地方都需要用到回調(diào)函數(shù)，所以這兩天深入了解了JavaScript的回調(diào)函數(shù)，下面是我對回調(diào)函數(shù)的理解。

函數(shù)也是對象

想要弄明白js回調(diào)函數(shù)，首先要清楚函數(shù)的規(guī)則，在javascript中函數(shù)是一個對象，準(zhǔn)確的來說函數(shù)是用function()構(gòu)造函數(shù)創(chuàng)建的一個function對象，因此我們可以將函數(shù)存儲在變量中，當(dāng)然也就可以將存儲在變量中的函數(shù)作為一個參數(shù)傳遞給另一個函數(shù)，這就是回調(diào)函數(shù)。
舉個例子：

var callback = function(arg3) {
    console.log("callback Totle is:" + arg3)
  }

function fn(arg1, arg2, cb) {
  var Total = arg1 + arg2;
  cb(Total);
  console.log("mainFunction Totle is:" + Total)
}

fn(2, 2, callback)   // 調(diào)用fn()函數(shù)，并傳入2, 2, callback作為參數(shù)

上面例子中我們將一個匿名函數(shù)賦值給變量callback，同時將callback作為參數(shù)傳遞給了fn()函數(shù)，這時在函數(shù)fn()中callback就是回調(diào)函數(shù)。

同步回調(diào)和異步回調(diào)

上面的代碼執(zhí)行結(jié)果為：

callback Totle is:4
mainFunction Totle is:4

不對啊！回調(diào)函數(shù)不是應(yīng)該在主函數(shù)的最后執(zhí)行嗎？
對，很多介紹回調(diào)函數(shù)的例子講到這里是就完了，異步回調(diào)函數(shù)的確是應(yīng)該在函數(shù)的最后執(zhí)行，不過上面的例子是一個同步回調(diào)函數(shù)，函數(shù)的執(zhí)行順序依然自上而下順序執(zhí)行。那么什么是異步回調(diào)呢？我們又怎么實(shí)現(xiàn)異步回調(diào)呢？下面我們舉兩個例子來說明：

示例1：

function f2() {

    console.log("f2 finished") 
}

function f1(cb) {

    setTimeout(cb,1000)        //用setTimeout()模擬耗時操作
    console.log("f1 finished")
}

f1(f2);    //得到的結(jié)果是 f1 finished ，f2 finished

這里我們用setTimeout()來模擬耗時操作的前提是js中的setTimeout()函數(shù)支持異步處理，所以我們得到的結(jié)果是 f1 finished ，f2 finished

示例2：

var fs = require("fs");

fs.readFile("input.txt","utf-8", function (err, data) {
    if (err) return console.error(err);
    console.log(data.toString());
});

console.log("程序執(zhí)行結(jié)束!");

程序執(zhí)行的結(jié)果是:

$ node app
程序執(zhí)行結(jié)束!
我們來測試一下異步回調(diào)函數(shù)

上面例子中我們先創(chuàng)建了一個文件input.txt，里面的內(nèi)容是:"我們來測試一下異步回調(diào)函數(shù)"
如果按照同步的思維，程序應(yīng)該執(zhí)行fs.readFile，直到文件讀完之后才執(zhí)行后面的console.log("程序執(zhí)行結(jié)束!"); 然而node中的fs.readFile是支持異步處理的，因此程序執(zhí)行到這兒的時候并不會阻塞，而是繼續(xù)向后執(zhí)行，當(dāng)文件讀取完畢之后再自動調(diào)用傳入的匿名回調(diào)函數(shù)，因此出現(xiàn)了上面的結(jié)果。

參考文章：
詳解回調(diào)函數(shù)——以JS為例解讀異步、回調(diào)和EventLoop http://blog.csdn.net/tywinsta...
Javascript異步編程的4種方法 - 阮一峰的網(wǎng)絡(luò)日志http://www.ruanyifeng.com/blo...