回調:回調是一個函數被作爲一個參數傳遞到另一個函數裏,在那個函數執行完後再執行(存在同步、異步)
同步回調:
function A(callback){
console.log("I am A");
callback(); //調用該函數
}
function B(){
console.log("I am B");
}
A(B); // I am A I am B
異步回調:
因爲Javascript語言的執行環境是"單線程",但是有很多情況的執行步驟(ajax請求遠程數據,IO等)是非常耗時的,
如果一直單線程的堵塞下去會導致程序的等待時間過長頁面失去響應,影響用戶體驗。常用的異步回調方法:
1、ajax $.when
1) 指定同一ajax操作的多個回調函數
$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!");} )
.fail(function(){ alert("出錯啦!"); } )
.done(function(){ alert("第二個回調函數!");} );
允許自由添加多個回調函數,它們按照添加順序執行
2) 爲多個ajax操作指定回調函數
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
先執行兩個操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就運行done()指定的回調函數;如果有一個失敗或都失敗了,就執行fail()指定的回調函數。
3) 普通操作的回調函數接口
//$.when()的參數只能是deferred對象,所以wait()進行改寫
var dtd = $.Deferred(); // 新建一個deferred對象
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變deferred對象的執行狀態
};
setTimeout(tasks,5000);
return dtd;
};
//wait()函數運行完,就會自動運行done()方法指定的回調函數
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
2、Promises: 一套異步操作處理機制
promise 狀態:
pending:初始狀態,既不是成功,也不是失敗狀態
resolve: 操作成功
rejected:操作失敗
var promiseObj = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('foo');
},300);
});
promiseObj.then(function(value){
console.log(value); // foo
});
3、async await
async 異步:用於申明一個 異步的function(返回一個promise 對象)
await 等待:用於等待一個異步任務執行完成的的結果( await 只能出現在 async 函數中)
參考文章:JavaScript Promise迷你書(中文版)
用 async/await 來處理異步
js async await 終極異步解決方案