乐趣区

异步操作一概述

单线程模型
同步任务和异步任务
任务队列和事件循环
异步操作的模式
回调函数
事件监听
发布 / 订阅
异步操作的流程控制
串行执行
并行执行
并行与串行的结合

1. 单线程模型
指的是 js 只在线程运行,一个时间执行一个任务,其他任务排队。事实上是一个运行脚本的主线程加多个后台配合的线程。

事件循环机制
Js 单线程模式使得 cpu 空闲,io 操作慢(Ajax 请求网络资源)。cpu 不管 io 操作,挂起任务,运行排队后面的任务,等 io 完成再执行的机制。

2. 同步任务和异步任务
任务全部分为这两类。

同步任务在主线程的任务按排队顺序执行。

异步任务指的是被引擎挂到一边,不在主线程而进去任务队列的任务。等到可以执行了,该任务采用回调函数的方式进入主线程。在他后面的任务不等他结束马上执行。

举例来说,Ajax 如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

3. 任务队列和事件循环
Js 除了正在运行的主线程,还有一个异步任务队列,

主线程先完成全部同步任务,在检查异步任务是否可以执行,可以的话安排进主线程,此时就变成同步任务了,然后继续检查。直到任务队列为空。

异步任务主要写法是回调函数,因为有回调函数才会进入任务队列,等重新进入主线程,马上执行回调函数。回调函数指定了下一步操作。

JavaScript 引擎怎么知道异步任务有没有结果,能不能进入主线程呢?答案就是引擎在不停地检查,一遍又一遍,只要同步任务执行完了,引擎就会去检查那些挂起来的异步任务,是不是可以进入主线程了。这种循环检查的机制,就叫做事件循环(Event Loop)

4. 异步操作的模式
4.1 回调函数
下面是两个函数 f1 和 f2,编程的意图是 f2 必须等到 f1 执行完成,才能执行。

function f1() {
// …
}

function f2() {
// …
}

f1();
f2();
上面代码的问题在于,如果 f1 是异步操作,f2 会立即执行,不会等到 f1 结束再执行。

这时,可以考虑改写 f1,把 f2 写成 f1 的回调函数。

function f1(callback) {
// …
callback();
}

function f2() {
// …
}

f1(f2);
易理解实现
不利于阅读和维护,高耦合。

4.2 事件监听
另一种思路是采用事件驱动模式。异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
f1.on(‘done’, f2);
上面这行代码的意思是,当 f1 发生 done 事件,就执行 f2。然后,对 f1 进行改写:

function f1() {
setTimeout(function () {

// ...
f1.trigger('done');

}, 1000);
}
可绑定多个事件,每个事件触发多个回调,易理解,去耦合。

4.3 发布 / 订阅
某个任务(异步)完成,发布信号。多个任务订阅(回调),从而知道自己什么时候执行。
首先,f2 向信号中心 jQuery 订阅 done 信号。

jQuery.subscribe(‘done’, f2);
然后,f1 进行如下改写。

function f1() {
setTimeout(function () {

// ...
jQuery.publish('done');

}, 1000);
}
上面代码中,jQuery.publish(‘done’)的意思是,f1 执行完成后,向信号中心 jQuery 发布 done 信号,从而引发 f2 的执行。

f2 完成执行后,可以取消订阅(unsubscribe)。

jQuery.unsubscribe(‘done’, f2);
这种方法的性质与“事件监听”类似,但是明显优于后者。因为可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

5. 异步操作的流程控制
function async(arg, callback) {
console.log(‘ 参数为 ‘ + arg +’ , 1 秒后返回结果 ’);
setTimeout(function () {callback(arg * 2); }, 1000);
}
上面代码的 async 函数是一个异步任务,非常耗时,每次执行需要 1 秒才能完成,然后再调用回调函数。

如果有六个这样的异步任务,需要全部完成后,才能执行最后的 final 函数。请问应该如何安排操作流程?

function final(value) {
console.log(‘ 完成: ‘, value);
}

async(1, function (value) {
async(2, function (value) {

async(3, function (value) {async(4, function (value) {async(5, function (value) {async(6, final);
    });
  });
});

});
});
// 参数为 1 , 1 秒后返回结果
// 参数为 2 , 1 秒后返回结果
// 参数为 3 , 1 秒后返回结果
// 参数为 4 , 1 秒后返回结果
// 参数为 5 , 1 秒后返回结果
// 参数为 6 , 1 秒后返回结果
// 完成: 12
上面代码中,六个回调函数的嵌套,不仅写起来麻烦,容易出错,而且难以维护。
5.1 串行执行
我们可以编写一个流程控制函数,让它来控制异步任务,一个任务完成以后,再执行另一个。这就叫串行执行。
我们可以编写一个流程控制函数,让它来控制异步任务,一个任务完成以后,再执行另一个。这就叫串行执行。

var items = [1, 2, 3, 4, 5, 6];
var results = [];

function async(arg, callback) {
console.log(‘ 参数为 ‘ + arg +’ , 1 秒后返回结果 ’);
setTimeout(function () {callback(arg * 2); }, 1000);
}

function final(value) {
console.log(‘ 完成: ‘, value);
}

function series(item) {
if(item) {

async(item, function(result) {results.push(result);
  return series(items.shift());
});

} else {

return final(results[results.length - 1]);

}
}

series(items.shift());
上面代码中,函数 series 就是串行函数,它会依次执行异步任务,所有任务都完成后,才会执行 final 函数。items 数组保存每一个异步任务的参数,results 数组保存每一个异步任务的运行结果。

注意,上面的写法需要六秒,才能完成整个脚本。

5.2 并行执行

流程控制函数也可以是并行执行,即所有异步任务同时执行,等到全部完成以后,才执行 final 函数。

var items = [1, 2, 3, 4, 5, 6];
var results = [];

function async(arg, callback) {
console.log(‘ 参数为 ‘ + arg +’ , 1 秒后返回结果 ’);
setTimeout(function () {callback(arg * 2); }, 1000);
}

function final(value) {
console.log(‘ 完成: ‘, value);
}

items.forEach(function(item) {
async(item, function(result){

results.push(result);
if(results.length === items.length) {final(results[results.length - 1]);
}

})
});
上面代码中,forEach 方法会同时发起六个异步任务,等到它们全部完成以后,才会执行 final 函数。

相比而言,上面的写法只要一秒,就能完成整个脚本。这就是说,并行执行的效率较高,比起串行执行一次只能执行一个任务,较为节约时间。但是问题在于如果并行的任务较多,很容易耗尽系统资源,拖慢运行速度。因此有了第三种流程控制方式。

5.3 并行与串行的结合

所谓并行与串行的结合,就是设置一个门槛,每次最多只能并行执行 n 个异步任务,这样就避免了过分占用系统资源。

var items = [1, 2, 3, 4, 5, 6];
var results = [];
var running = 0;
var limit = 2;

function async(arg, callback) {
console.log(‘ 参数为 ‘ + arg +’ , 1 秒后返回结果 ’);
setTimeout(function () {callback(arg * 2); }, 1000);
}

function final(value) {
console.log(‘ 完成: ‘, value);
}

function launcher() {
while(running < limit && items.length > 0) {

var item = items.shift();
async(item, function(result) {results.push(result);
  running--;
  if(items.length > 0) {launcher();
  } else if(running == 0) {final(results);
  }
});
running++;

}
}

launcher();
上面代码中,最多只能同时运行两个异步任务。变量 running 记录当前正在运行的任务数,只要低于门槛值,就再启动一个新的任务,如果等于 0,就表示所有任务都执行完了,这时就执行 final 函数。

这段代码需要三秒完成整个脚本,处在串行执行和并行执行之间。通过调节 limit 变量,达到效率和资源的最佳平衡

退出移动版