Saber 酱的抱枕

console.log(0)
setTimeout(() => {
  console.log(1)
}, 0);
console.log(2)

如上代码会输出 0,2,1。 setTimeout 里面的是最后执行的。这是因为 JavaScript 的任务队列分为同步队列和异步队列， 优先执行同步队列里的任务，同步队列里的任务执行完了才会执行异步队列里的任务。setTimeout 里的代码会被放到异步队列里，这样就改变了代码的执行顺序。指定时间 0 是让 JavaScript 执行异步队列时尽早执行这部分代码。

今天遇到个使用 setTimeout 0 的情况。伪代码如下：

// 文件 1：change 时初始化一个新的页面
listen('change'){
  init()
}

// 文件 2：change 时销毁旧页面
listen('change'){
  destroy()
}

当页面类型 change 时，我希望先销毁旧页面，再创建新页面。但实际执行时先创建了新页面，然后才执行了销毁，结果导致刚生成的新页面被销毁了。

因为这两部分代码位于两个文件里，不能修改代码的顺序。解决办法是给 init 包裹一层 setTimeout 0，使其脱离同步任务队列。这样就会先执行 destroy 后执行 init，达到了预期目的。

相关文章：JavaScript任务队列的执行

JavaScript 中 setTimeout 0 的使用