JS中含有异步操作的执行顺序

看下面这个简单的例子,我们将会了解到JS代码含有异步操作的时执行顺序:

setTimeout(function(){
  console.log(9);
},0);  //设置一个定时器
console.log(5);

这段代码的输出顺序是什么?
如果你的答案是9,5.那么有点遗憾,输出顺序是5,9.
Why?
在Javascript引擎线程中,存在着一个主线程和一个任务队列,同步任务会在其主线程中执行,而一些异步操作如setTimeout,ajax异步请求等,JS引擎会将这些操作放入任务队列中执行,等到异步操作完成后,会调用回调函数来执行。即同步任务先执行,任务队列里的异步操作后执行。

让我们一起来看一个复杂一点的例子:

setTimeout(function(){
  setTimeout(function(){
     console.log(9);//输出语句1;
  },0);
  console.log(7);//输出语句2;
   setTimeout(function(){
     console.log(0);//输出语句3;
  },0);
  console.log(8);//输出语句4;
},0);
setTimeout(function(){
     console.log(2);//输出语句5
  },0);
console.log(5);//输出语句6

控制台上将会输出什么?相信你已经有答案了
没错,控制台上将会依次输出5,7,8,2,9,0.
在这段代码中,输出语句6将会第一个执行,因为其在主线程中优先被执行,此时,任务队列里有两个定时器1和2,最先进入是如下定时器:

setTimeout(function(){
  setTimeout(function(){
     console.log(9);//输出语句1;
  },0);
  console.log(7);//输出语句2;
   setTimeout(function(){
     console.log(0);//输出语句3;
  },0);
  console.log(8);//输出语句4;
},0);

其次是:

setTimeout(function(){
     console.log(2);//输出语句5;
  },0);

因为所有的定时器延迟执行时间都一样,第一个进入任务队列的定时器将会优先执行,此时输出语句2和4将会优先输出,输出语句1和3所在的定时器将会依次进入任务队列,等待执行。
此时任务队列里有定时器2,和后来依次进入的两个定时器。按照顺序将会依次输出。所以输出顺序是5,7,8,2,9,0.
JS中含有异步操作的执行顺序_第1张图片

你可能感兴趣的:(JS中含有异步操作的执行顺序)