为什么 setTimeout 用于 Javascript 中的计数器动画？

Question

我试图找到这个问题的答案，但在任何地方都找不到。这里我有我的动画代码：let counters = document.querySelectorAll('.counter');   counters.forEach(counter => {       counter.innerText = 0;       let target = +counter.dataset.count;       let step = 1;    let countIt = function () {        let displayedCount = +counter.innerText; // 0        if(displayedCount < target) {            counter.innerText = displayedCount + step;            setTimeout(countIt, 1);            // countIt(); // here if i call countIt directly then my counter animation does not work.                           //but with setTimeout it works.        } else {            counter.innerText = target;        }    }    countIt();   })所以我的问题是为什么会这样？任何人都可以解释一下引擎盖下发生了什么？

Answer 1

当 JavaScript 代码在主 JavaScript 线程上运行时，浏览器不会重新绘制页面。通过直接调用countIt，您将在同一个 JavaScript 作业中进行所有更新，然后浏览器在完成后重新绘制页面。通过使用setTimeout，您可以将更新分成多个间隔大约1 毫秒的 JavaScript 作业，因此浏览器有机会在它们之间重新绘制。

您可以在HTML 规范的Event Loops部分和 JavaScript 规范的Jobs and Host Operations to Enqueue Jobs部分找到详细信息。它们使用的术语略有不同：JavaScript“脚本作业”主要是 HTML“任务”，而 JavaScript“承诺作业”是一种 HTML“微任务”。

您可能还对 感兴趣requestAnimationFrame，它提供了一种在重新绘制页面之前请求回调的方法。现在，您的计数器在重绘之间会更新多次，通常大约每 16.667 毫秒发生一次。所以浏览器不会绘制你在 counter DOM 元素中输入的每一个值。