JavaScript 计时器之旅

本是古典何须时尚 2022-05-13 12:58 141阅读 0赞

# JavaScript 计时器之旅 #

突击小测验: JavaScript 各种定时器之间的区别是什么?

*  Promises
 *  setTimeout
 *  setInterval
 *  setImmediate
 *  requestAnimationFrame
 *  requestIdleCallback

更具体地讲，如果你立刻对这些计时器进行排序，知道他们触发的顺序是什么吗？

如果不能，那你可能并不孤独。我已经写 JavaScript 和做编程许多年，曾经为一家浏览器厂商工作超过两年，直到最近，我才真正了解了这些计时器以及如何使用它们。

在这篇文章中，我将高度概述这些定时器工作方式以及使用它们的时机，并且会一起介绍 Lodash 很有用的 `debounce()` 和 `throttle()` 函数。

## Promises 和 microtasks ##

让我们先从这里开始，因为它大概是最简单的了。一个 [Promise][] 回调也被称为 “microtask”，它以与 [MutationObserver][] 回调相同的频率运行。如果 [queueMicrotask()][queueMicrotask] 没有被规范排除并且进入浏览器领域，它也会有同样的结果。

[我已经写过很多关于 promise 的文章][promise]。然而值得一提的是，Promise 有一个很容易被误解的地方是它们不会给浏览器留空闲的时间。那是因为处于异步回调队列中，但是并不意味着浏览器可以进行渲染，或者处理输入，或者做其他我们希望浏览器做的工作。

举个例子，假设我们有一个阻塞主线程1秒钟的函数：

[原文链接][Link 1]

[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[MutationObserver]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
[queueMicrotask]: https://github.com/whatwg/html/commit/9d7cf125f960e6bb8d9b7c9456595f505f2e9d4b
[promise]: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
[Link 1]: http://click.aliyun.com/m/1000019518/