案例分析：

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

例子1：

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

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

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

這種不確定性很有可能就是一個競態條件 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函數 ajax( 'http://some.url.1', response ); ajax( 'http://some.url.2', response );

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

例子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函數 ajax( 'http://some.url.1', foo ); ajax( 'http://some.url.2', bar );

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

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

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函數 ajax( 'http://some.url.1', foo );ajax( 'http://some.url.2', bar );

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。