最简单的异步方式:回调
最早听说异步是在发送ajax请求的时候,因为我们不希望因为发送ajax的进程阻挡了其他事件的处理,所以我们时候回调函数,在得到结果是触发回调函数。这是一个解决办法,但一定不是最好的。因为我们可以看到,虽然jquery的ajax很好用,但是我们无法准确的知道这个回调函数会在哪个时间点执行。所以异步变成了一个可怕的东西。
像排队一样执行的代码
1 let a = 0;
2 let b = 0;
3 console.log(a,b)
4 a++;
5 b++;
代码的执行就像我们人去买东西一样,会进入一个队列一个一个的处理。
但是像上面的代码,在多数情况下在开发者工具的控制台中打印出的与期望的是一致的,但是这段代码运行的时候浏览器可能会觉得应该把控制台的I/O延迟到后台,在这种情况下,等到浏览器控制台输出对象内容时,a++可能已经执行。
如果遇到ajax请求(带回调函数的那种),javascript会通知宿主环境:“嘿,如果你请求成功拿到数据就执行这个函数。”然后浏览器就会设置监听来自网络的响应,拿到要给你的数据会就会把回调函数插入到事件循环队列。
如果遇到像setTimeout这样的定时器,浏览器会在它的定时到达时将它加入事件循环队列,它不能插队,所以等待它执行的时间kennel会比预期的更长。
并行,竞态
并行
在指统一个程序中可能有两个线程同时在运行,这样如果它们都在操作相同的变量,可能会得到不确定的结果。
竞态
function foo() {
a = a + 1;
}
function bar() {
a = a + 2;
}
ajax('http://some2.url',foo);
ajax('http://some1.url',bar);
我们无法预料哪个ajax会先请求到数据,但是不论是谁先请求到数据,在它执行回调函数的时候内部不会被打断,所以它只可能有两种结果,这取决与谁先请求到数据。
交互/非交互
如果两个回调函数之间没有数据之间的关联,我们称它是非交互的,它们的执行顺序对结果并没有影响。
如果两个回调函数之间的数据是有关联的,或者说它们两个调用的回调函数本来就完全一样,这时我们称它们是交互的,它们的执行顺序会对结果产生影响。
我们可以通过协调交互来避免这种竞态。
function response(data) {
if(data.url==='url1') {
res[0] = data;
} else if(data.url==='url2') {
res[1] = data;
}
}
ajax('url1',response);
ajax('url2',response);
不管先返回那种数据,我们通过url的区分都将它们放在了特定的位置。
协助
如果有一个接口返回的数据特别多(比如大于一千条),处理数据会花很长的时间,而这个时间内,其他任何动作都不能执行。这个时候我们可以先处理前一千条数据,之后在处理剩下的数据。
function response(data) {
let chuck = data.splice(0,1000);
res.res.concat(
chuck.map((val)=>{
return val*2
})
);
if(data.length>0) {
setTimeout(()=>{
response(data)
},0);
}
}