JS篇 - 异步函数执行顺序问题

大家做笔试题的时候一定遇到过判断异步函数执行顺序的题目,包含setTimeout,setInterval,Promise,Async等等,来一道基础题,抛砖引玉一下:

for (var i = 1;i < 6;i ++) {
  setTimeout(function fn() {
      console.log(i)
  },i * 1000)
}

对于萌新来说,发现在控制台打印的是连续的5个6可能会大吃一惊,老鸟可能会知道正确答案,然后说这个用闭包(即IIFE)解决或者用es6的局部变量就可以解决了(当然还有其他很多方法,我们最后再总结),但具体为什么会产生这样的情况,大多数人都说不清楚。

for (var i = 1;i < 6;i ++) { // 闭包
  (function(arg){
    setTimeout(function fn() {
        console.log(arg)
    },arg * 1000)
   })(i);//调用时参数
} 
for (let i = 1;i < 6;i ++) { // es6
  setTimeout(function fn() {
      console.log(i)
  },i * 1000)
}

导致这个问题的原因还得从JavaScript的底层性质说起,总所周知JavaScript的一大特点就是单线程,那我们是如何处理多线程和异步的情况呢?利用的就是任务队列这一思想,学过node都知道的事件循环机制。

任务队列

任务队列

在JavaScript中我们拥有两个任务队列,分别为宏任务队列(macro-task)和微任务队列(micro-task),新标准中又被称为 taskjobs

宏任务微任务
script(整体代码)process.nextTick(只在node环境中可用)
XHR回调/AsyncPromise.then
事件回调(鼠标键盘事件)Object.observe(已废弃)
setImmediate(只在node环境中可用)MutationObserver(html5新特性,dom变动观察器)
setTimeout-
setInterval-
I/O-
UI rendering-

process.nextTick() 指在当前"执行栈"的尾部之后,下一次Event Loop(主线程读取"任务队列")之前 ,触发process指定的回调函数。也就是说,它指定的任务总是发生在所有异步任务之前,当前主线程的末尾。(nextTick虽然也会异步执行,但是不会给其他io事件执行的任何机会)

整个事件循环是从整体代码执行为第一个宏任务开始的,然后再执行其中的微任务,完成第一次循环,再找到接下来的宏任务执行,再执行其微任务,这样一层层的循环直到执行完毕。

接下来我们分析一下上面那道问题,首先执行第一次宏任务,也就是 for 循环,执行5遍,分别得到:

setTimeout(function fn() {
      console.log(i)  // 异步里面的函数是未执行状态,所以i是现在是不确定的
  },1000);

setTimeout(function fn() {
      console.log(i)
  },2000)

... // 5个待执行函数

上诉五个待执行函数将排进宏队列中,第一遍宏队列执行完毕,由于没有微队列,我们接下来继续执行其宏队列。

一秒后,将执行第一次 console.log(i) ,根据JavaScript中作用域的定义,首先我们会在当前执行作用域寻找 i 的值,发现不存在,这时候向上寻找在全局作用域中,我们找到了 i 这时候 i 已经是6了,所以控制台将打印出6,后续相同,隔一秒打印出一个6。

现在明白了为什么会出现5个6了吧,也应该明白了,为什么能通过闭包解决这个问题,因为相当于给每个宏任务都添加上 i 的值,就不需要向上查找全局的 i 了。

拓展

我们根据上表来做做练习,看看你是否真的掌握了。

// 请判断下列代码的执行顺序
console.log("start");

// 因为setImmediate只在node环境中可用,所以这里用setTimeout(0)代替
setTimeout(function() {
  console.log("setImmediate");
}, 0);

setTimeout(function() {
  console.log("timeout1");
  new Promise(function(resolve) {
    resolve();
    console.log("timeout1_promise");
  }).then(function() {
    console.log("timeout1_then");
  });
}, 2000);

for (var i = 1; i < 6; i++) {
  setTimeout(function() {
    console.log("loop" + i);
  }, i * 1000);
  console.log(i);
}

function xhr() {
  // 用async模拟XHR
  console.log("xhr");
  return "async";
}

async function asyncFn() {
  // 用async模拟
  const tag = await xhr();
  return tag;
}

asyncFn().then(arg => console.log(arg));

new Promise(function(resolve) {
  console.log("promise1");
  reject();
}).catch(function() {
  console.log("catch1");
});

setTimeout(function() {
  console.log("timeout2");
  new Promise(function(resolve) {
    console.log("timeout2_promise");
    resolve();
  }).then(function() {
    console.log("timeout2_then");
  });
}, 1000);

先自己默默地做一下,再对比控制台中的输出,错了不要紧,我们一步步来看:

第一次事件循环
进入宏任务队列调用栈执行进入微任务队列
-console.log(“start”)-
setImmediate--
timeout1--
setTimeout(i) * 6--
-console.log(1) … console.log(5)-
-console.log(“xhr”)async.then()
-console.log(“promise1”)promise1.catch
timeout2--
等待第二次事件循环开始执行微任微任务队列开始
-asyncFn().then()挂起-
-console.log(“catch1”)-
-console.log(async)-

这时候控制台将输出:start1,2,3,4,5,xhr,promise1,catch1,async
解释一下,async为Generator 函数的语法糖(es6新特性),它是一个状态机,封装了多个内部状态,与一般的异步不太一样,虽然都是同时执行微任务,但它会有一个挂起,再.next()的过程,会延迟一点。

第二次事件循环
进入宏任务队列调用栈执行进入微任务队列
-console.log(“setImmediate”)-
-console.log(“loop6”)-
-console.log(“timeout2”)-
-console.log(“timeout2_promise”)timeout2.then()
-console.log(“timeout2_then”)-
-console.log(“timeout1”)-
-console.log(“timeout1_promise”)timeout1.then()
-console.log(“timeout1_then”)-
-console.log(“loop6”)*4-

这时候控制台将输出:setImmediateloop6,timeout2,timeout2_promise,timeout2_then,timeout1,timeout1_promise,timeout1_then,loop6,loop6,loop6,loop6

附:

下面再给出一开始for循环i问题的其他方法

// 利用setTimeout的第三个参数
for (var i=1; i<6; i++) {
  setTimeout( function fn(i) {
    console.log(i);    
   }, i*1000,i );
}
// 利用bind函数
for (var i=1; i<6; i++) {
  setTimeout( function fn(i) {
    console.log(i);
  }.bind(null,i), i*1000 );
}

关注 《前端面试总结》 文集以便查看跟多前端面试经验。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值