在前一篇文章: javascript-非同步asynchronus-函式 中,我們介紹了 非同步(Asynchronus) 的觀點了,再來將說明如何使用 回呼函式(callback) 來進行撰寫較易維護的編碼:


編碼如下,下方是一個 AJAX 的範例:

var req = new XMLHttpRequest();

req.open('get','http://skyroxas.tw/aboutme');

req.onload = function(){
  var content = this.responseText;
}

req.send(); //執行連線

上面的範例中,如果我們要在主程式中取得到 this.responseText, 的資料進行操作,是一件非常困難的事情

不只是單單 作用域 上的問題,還有就是你沒有辦法掌握到 連線時間 的長短,如下:

function getData(){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    return this.responseText;
  }
  req.send(); //執行連線 
}

console.log(getData()) //undefined

但是如果直接在 onload() 的作用域中,直接對 this.responseText, 的資料進行操作

雖然是可行的,但如果操作的事件一多,很容易 降低編碼的可讀性,與 增加不少後續的維護時間,如下:

function getData(){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    //codeing........
    //codeing........
    console.log(this.responseText)
  }
  req.send(); //執行連線 
}
getData();


使用 回呼函式(callback)

我們用 回呼函式(callback)的方式,讓 AJAX 在 取得連線時,在執行一隻另外宣告的函式,如下:

function getData(callback){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    callback(this.this.responseText) // 在這邊呼叫另一隻函數,並將取得結果傳入
  }
  req.send();
}
function showData(data){
    //codeing........
    //codeing........
    console.log(data)
}
getData(showData);

使用 回呼函式(callback)的方式,可以解決我上面所說的問題

另外在 ES6 中有另外有提供一種專門用來處理 非同步(Asynchronus) 編程 的物件 Promises , 在後續會進行說明

Summary
[JavaScript] 非同步處理技巧  回呼函式 Callback
Article Name
[JavaScript] 非同步處理技巧 回呼函式 Callback
Description
在前一篇文章: [javascript-非同步asynchronus-函式] 中,我們介紹了 `非同步(Asynchronus)` 的觀點了,再來將說明如何使用 `回呼函式(callback)` 來進行撰寫較易維護的編碼:
Author

Facebook 功能: