Как узнать, какие события замедляют 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 и Браузер WebWorker API)

Первый элемент в моем списке сильно зависит от кода вне вызова setTimeout в текущем контексте выполнения. В зависимости от реализации цикла событий, это также может зависеть даже от других событий, которые могли бы прерваться между текущим элементом очереди событий благодаря поступлению в очередь до установки таймера или даже (в некоторых реализациях) по прибытии до таймер истек.

Поскольку JavaScript является однопоточным, ничто не прерывается при его выполнении, и элементы, ожидающие в очереди, включая истекшие таймеры, обрабатываются только после полного выполнения всех предыдущих элементов.

MDN, как всегда, дает вам более подробное представление о теоретических аспектах, а также о реализации этих концепций SpiderMonkey:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Answer 2

внутри setTimeout используйте функцию removeClass, чтобы удалить добавленный класс 'first-start'.

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

}, 1000);