如何知道哪些事件减慢了setTimeout？

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函数删除你添加的'first-start'类。

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

}, 1000);