JavaScript：回調是什麼鬼

By Brandon Morelli | Jun 12, 2017

原文

用六分鐘經過簡單的例子學習基礎回調

前言

嗨，我是Brandon，我建立了codeburst.io,在上面寫了關於js的教程和文章來幫助初學者深刻學習web開發。若是你有疑問，能夠給我留言，或關注個人twitter brandonmorelli.

什麼是回調

簡單地說：回調是一個函數執行完後緊接着纔會被執行的函數——所以被稱爲函數。

詳細地說：在js中，函數是Objects。正由於如此，函數能作爲參數傳給另外一個函數，也能作爲返回值被其餘函數返回。接受函數作爲參數或者返回值爲函數的函數叫作高階函數。作爲參數傳遞的函數叫作回調函數。

爲何咱們須要回調

一個很是重要的理由就是，js是事件驅動語言。這意味着，js不會等待響應，而是一直偵聽其餘事件一直執行下去。來看個例子：

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();
複製代碼

和你想的同樣，函數first先執行，而後是second函數。

// 1
// 2
複製代碼

到如今爲止還好。

可是若是函數first有一段不能當即執行的代碼呢？舉個例子，咱們有個異步請求（ajax之類的），須要等待響應的。咱們用setTimeout來模擬下。咱們延遲500毫秒來模仿這個異步請求。

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();
複製代碼

如今先不須要知道setTimeout的工做原理。重要的是咱們知道在500毫秒後會打印1；因此當咱們調用時會發生什麼？

first();
second();
// 2
// 1
複製代碼

即便咱們先調用了first函數，咱們看到仍是先打印了second函數裏的內容。

這並非由於js不按照咱們想要的順序執行，而是js沒有等待first函數的響應，繼續執行了 second 函數。

爲何要告訴你這些？由於你不能只是一個接着一個調用函數，並但願它們以正確的順序執行。回調是一種確保某些代碼在其餘代碼已經完成執行以前不會執行的方法。

建立回調

來動手寫一個吧！

首先打開你的開發者工具Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J控制檯並在控制檯輸入如下代碼：

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}
複製代碼

上面的代碼裏，咱們建立了一個接受一個參數的 doHomework 函數，而且把參數alert出來。

doHomework('math');
// Alerts: Starting my math homework.
複製代碼

如今加入咱們的回調，代碼以下：

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});
複製代碼

正如你所看到的，若是你在控制檯中輸入上述代碼，你將收到兩個alert：「starting homework」alert，而後是「finished homework」alert。

你也能夠這樣寫：

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);
複製代碼

此示例的結果與前一個示例徹底相同，但setup略有不一樣。 如你所見，咱們在doHomework（）函數調用期間將alertFinished函數定義做爲參數傳遞！

真實例子

上週我發表了一篇關於如何用38行代碼建立Twitter機器人的文章。 之因此能作到的惟一緣由是由於Twitters API。當你向API發出請求時，你必須等待響應才能對該響應執行操做。這是現實中回調的一個很好的例子。 這是請求的樣子：

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})
複製代碼

• T.get是Twitter的請求方法
• 有三個參數，第一個是請求路徑，第二個是咱們的參數，第三個是對響應作點事情的回調函數。

回調在這裏很重要，由於咱們須要等待來自服務器的響應才能繼續咱們的後續操做。咱們不知道咱們的API請求是否會成功，因此在經過get請求將參數發送到search / tweets後，咱們繼續執行咱們的同步任務，執行完後等待並執行異步任務。 一旦Twitter響應，就會調用咱們的回調函數。 Twitter將向咱們發送錯誤（錯誤）對象或響應對象。 在咱們的回調函數中，咱們可使用if（）語句來肯定咱們的請求是否成功，而後相應地對新數據進行操做。