青天诀
青天诀

JavaScript 异步机制

先看两个js代码片段

for  (var i = 1; i <= 5; i++) {
      setTimeout(function(){
          console.log(i);
      }, 0);
}

结果： 输出 5 次 6

var start = new Date;
setTimeout(function(){
    var end = new Date;
    console.log('Time elapsed:', end - start, 'ms');
}, 500);
while (new Date - start < 1000) {};

结果：Time elapsed 1020ms （不同的机器，数值会有不同，不过都会稍微大于1000）

之所以出现上面的结果，就是由于 setTimeout异步执行的结果，js具体的异步机制如下图所示：

JavaScript 异步机制_第1张图片

异步执行是 javascript 最重要的一个特性，它的原理： js执行引擎只有一个主线程执行代码逻辑，遇到需要异步执行的任务代码，会将其添加事件队列中。当主线程空闲时，轮询事件队列中可以执行的任务，将其放到主线程进行执行，以此类推，直到事件队列中无可执行的任务。

JS引擎只是执行事件队列中的异步代码，但事件队列中的信息来源并不是JS引擎，而是由浏览器中的其他相关线程产生的，如下图所示：

JavaScript 异步机制_第2张图片

以 http 传输线程为例：
最常见的就是 js 代码发出 ajax 请求，然后就是交给浏览器的http线程去处理了，当后端有数据返回时，http 线程在事件队列中生成一个数据已ready好的事件，等待 JS 主线程空闲时执行。
再比如，我们常见的click，mouse事件，都是GUI 事件触发线程生成的。当用户点击页面时，GUI 事件触发线程就会在事件队列中生成一个click事件，等待 JS 主线程空闲时执行。

你可能感兴趣的:(Web前端)