解決Javascript異步執(zhí)行不按順序問題

小編這次要給大家分享的是解決Javascript異步執(zhí)行不按順序問題，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)是網(wǎng)站建設技術企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都網(wǎng)站設計，網(wǎng)站設計，網(wǎng)站制作，網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十多年品質(zhì)，值得信賴！

案例分析：

比如執(zhí)行懶加載時候，onscroll 事件觸發(fā)多次事件時候會調(diào)用多次 ajax 回調(diào)事件，由于每個事件返回先后次序并不能保證和觸發(fā)前一致，所以在數(shù)據(jù)響應返回后所添加的數(shù)據(jù)順序就很在 push 到數(shù)組上順序不一致。

例子1：

var res = [];
   function response(data) {
     res.push( data );
}
// ajax(..)是某個庫中提供的某個Ajax函數(shù) 
ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response );

這里的并發(fā)“進程”是這兩個用來處理 Ajax 響應的 response() 調(diào)用。它們可能以任意順 序運行。

我們假定期望的行為是 res[0] 中放調(diào)用 "http://some.url.1" 的結果，res[1] 中放調(diào)用 "http://some.url.2" 的結果。有時候可能是這樣，但有時候卻恰好相反，這要視哪個調(diào) 用先完成而定。

這種不確定性很有可能就是一個競態(tài)條件 bug。

解決辦法

var res = [];
function response(data) {
     if (data.url == "http://some.url.1") {
       res[0] = data;
     }
     else if (data.url == "http://some.url.2") {
       res[1] = data;
     } 
}
// ajax(..)是某個庫中提供的某個Ajax函數(shù) 
ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response );

不管哪一個 Ajax 響應先返回，我們都要通過查看 data.url(當然，假定從服務器總會返 回一個!)判斷應該把響應數(shù)據(jù)放在 res 數(shù)組中的什么位置上。res[0] 總是包含 "http:// some.url.1" 的結果，res[1] 總是包含 "http://some.url.2" 的結果。通過簡單的協(xié)調(diào)，就 避免了競態(tài)條件引起的不確定性。

例子2:

var a, b;
   function foo(x) {
     a = x * 2;
     baz(); 
   }
   function bar(y) {
     b = y * 2;
     baz(); 
   }
   function baz() {
     console.log(a + b);
   }
// ajax(..)是某個庫中的某個Ajax函數(shù) 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar );

在這個例子中，無論 foo() 和 bar() 哪一個先被觸發(fā)，總會使 baz() 過早運行(a 或者 b 仍處 于未定義狀態(tài));但對 baz() 的第二次調(diào)用就沒有問題，因為這時候 a 和 b 都已經(jīng)可用了。

要解決這個問題有多種方法。這里給出了一種簡單方法:

var a, b;
function foo(x) {
     a = x * 2;
     if (a && b) {
       baz();
     } 
}
function bar(y) {
     b = y * 2;
     if (a && b) {
       baz();
     } 
}
function baz() {
     console.log( a + b );
}
// ajax(..)是某個庫中的某個Ajax函數(shù) 
ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );

包裹baz()調(diào)用的條件判斷if (a && b)傳統(tǒng)上稱為門(gate)，我們雖然不能確定a和b 到達的順序，但是會等到它們兩個都準備好再進一步打開門(調(diào)用 baz())。

看完這篇關于解決Javascript異步執(zhí)行不按順序問題的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

文章題目：解決Javascript異步執(zhí)行不按順序問題
本文鏈接：http://bm7419.com/article34/jjehse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站制作、云服務器、網(wǎng)站設計、軟件開發(fā)、手機網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設計公司