javascript关于异步执行不按顺序解决方案

参考：《你不知道的JavaScript中卷》异步1.4节

案例分析：

比如执行懒加载时候，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。

解决办法

 1 var res = [];
 2 function response(data) {
 3           if (data.url == "http://some.url.1") {
 4               res[0] = data;
 5           }
 6           else if (data.url == "http://some.url.2") {
 7               res[1] = data;
 8           } 
 9 }
10 // ajax(..)是某个库中提供的某个Ajax函数 
11 ajax( "http://some.url.1", response ); 
12 ajax( "http://some.url.2", response );

不管哪一个 Ajax 响应先返回，我们都要通过查看 data.url(当然，假定从服务器总会返回一个!)判断应该把响应数据放在 res 数组中的什么位置上。res[0] 总是包含 "http:// some.url.1" 的结果，res[1] 总是包含 "http://some.url.2" 的结果。通过简单的协调，就避免了竞态条件引起的不确定性。

例子2:

 1 var a, b;
 2       function foo(x) {
 3           a = x * 2;
 4           baz(); 
 5       }
 6       function bar(y) {
 7          b = y * 2;
 8          baz(); 
 9       }
10       function baz() {
11          console.log(a + b);
12       }
13 // ajax(..)是某个库中的某个Ajax函数 
14 ajax( "http://some.url.1", foo ); 
15 ajax( "http://some.url.2", bar );

在这个例子中，无论 foo() 和 bar() 哪一个先被触发，总会使 baz() 过早运行(a 或者 b 仍处于未定义状态);但对 baz() 的第二次调用就没有问题，因为这时候 a 和 b 都已经可用了。

要解决这个问题有多种方法。这里给出了一种简单方法:

 1 var a, b;
 2 function foo(x) {
 3          a = x * 2;
 4          if (a && b) {
 5              baz();
 6          } 
 7 }
 8 function bar(y) {
 9          b = y * 2;
10          if (a && b) {
11              baz();
12          } 
13 }
14 function baz() {
15          console.log( a + b );
16 }
17 // ajax(..)是某个库中的某个Ajax函数 
18 ajax( "http://some.url.1", foo );
19 ajax( "http://some.url.2", bar );

包裹baz()调用的条件判断if (a && b)传统上称为门(gate)，我们虽然不能确定a和b 到达的顺序，但是会等到它们两个都准备好再进一步打开门(调用 baz())。

更多相关细节可参考：《你不知道的JavaScript中卷》异步章节

javascript关于异步执行不按顺序解决方案

猜你喜欢