快捷導(dǎo)航

Javascript異步執(zhí)行不按順序解決方案

更新時(shí)間：2020年04月30日 09:50:34 作者：林中有風(fēng)

這篇文章主要介紹了Javascript異步執(zhí)行不按順序解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

案例分析：

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

例子1：

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

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

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

這種不確定性很有可能就是一個(gè)競(jìng)態(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(..)是某個(gè)庫(kù)中提供的某個(gè)Ajax函數(shù) 
ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response );

不管哪一個(gè) Ajax 響應(yīng)先返回，我們都要通過查看 data.url(當(dāng)然，假定從服務(wù)器總會(huì)返回一個(gè)!)判斷應(yīng)該把響應(yīng)數(shù)據(jù)放在 res 數(shù)組中的什么位置上。res[0] 總是包含 "http:// some.url.1" 的結(jié)果，res[1] 總是包含 "http://some.url.2" 的結(jié)果。通過簡(jiǎn)單的協(xié)調(diào)，就避免了競(jìng)態(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(..)是某個(gè)庫(kù)中的某個(gè)Ajax函數(shù) 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar );

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

要解決這個(gè)問題有多種方法。這里給出了一種簡(jiǎn)單方法:

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(..)是某個(gè)庫(kù)中的某個(gè)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 到達(dá)的順序，但是會(huì)等到它們兩個(gè)都準(zhǔn)備好再進(jìn)一步打開門(調(diào)用 baz())。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: