saber酱的抱枕

生于忧患,死于安乐

07/23
17:03
学习

JavaScript 中 setTimeout 0 的使用

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 的使用