Question

如何知道哪些事件会使setTimeout()变慢？

在我的代码中，我有2秒的关键帧动画。

我添加了一个类来为div设置动画

$('#first').addClass('first-start');

并使用setTimeout添加一个类，以仅在1秒后停止动画。

setTimeout(function() {
    $('#first').addClass('first-pause');
}, 1000);

如果我不阻止动画，则所有动画应为2秒。

我注意到setTimeout有时在1000毫秒后不能完全运行。我该怎么解决？

我怎么知道哪些事件会使setTimeout变慢？

Answer 1

JavaScript计时器非常不准确，您对此无能为力。只有同时满足以下两个条件，计时器才会启动：

了解原因的关键见解是了解JavaScript是按规范（外部Node.js Cluster和浏览器WebWorker API而言）是单线程的

列表中的第一项很大程度上取决于当前执行上下文中setTimeout调用之外的代码。根据事件循环的实现，它甚至还可以依赖于其他事件，这些事件可能是由于在设置计时器之前进入队列，或者甚至（在某些实现中）通过在设置之前就进入了事件队列而在当前事件队列项之间插入的。计时器已经过去。

由于JavaScript是单线程的，因此它的执行没有任何中断，并且只有在所有先前的项目都已完全执行后，才会处理队列中等待的项目（包括经过的计时器）。

MDN一如既往地为您提供了有关这些概念的理论方面以及SpiderMonkey实现的更详细的见解：

Answer 2

在setTimeout内部，使用removeClass函数删除添加的“首次启动”类。

setTimeout(function() {
$('#first').removeClass('first-pause');

}，1000）；