Пытаюсь остановить видео спустя x миллисекунд, как это более точно? setTimeout слишком неточен.
function() {
covervideo.play();
setTimeout(function() {
covervideo.pause();
}, 1150);
}
Пытаюсь остановить видео спустя x миллисекунд, как это более точно? setTimeout слишком неточен.
function() {
covervideo.play();
setTimeout(function() {
covervideo.pause();
}, 1150);
}
Подробный ответ есть на английском SO - (1)вот. Самый первый ответ теоритический, прочитать его будет не лишним, второй ответ уже с реальным примером, который можно юзать, данный код - используется вот в этой (2)либе, которая основана на коде из вот этой (3)статьи.
Так как информации по ссылкам много, возьму самое главное:
(1) Перевод принятого ответа:
Нет и нет. Вы не получите ничего близкого к точному таймеру с помощью setTimeout() - браузеры не могут работать с такой точностью. Однако, вам также не нужно полагаться на это для синхронизации вещей. Большинство анимационных библиотек выяснили это много лет назад: вы настроили обратный вызов с помощью setTimeout(), но определите, что нужно делать на основе значения (new Date()).milliseconds (или эквивалентного). Это позволяет вам использовать более надежную поддержку таймера в новых браузерах, сохраняя при этом правильное поведение в старых браузерах.
Он также позволяет избежать использования слишком большого количества таймеров! Это важно: каждый таймер является обратным вызовом. Каждый обратный вызов выполняет JS-код. Пока выполняется JS-код, события браузера, включая другие обратные вызовы, задерживаются или отбрасываются. Когда обратный вызов заканчивается, дополнительные обратные вызовы должны конкурировать с другими событиями браузера за возможность выполнить. Поэтому один таймер, который обрабатывает все ожидающие задачи для этого интервала, будет работать лучше, чем два таймера с совпадающими интервалами и (для коротких тайм-аутов) лучше, чем два таймера с перекрывающимися таймаутами!
В итоге: прекратите использование setTimeout() для реализации проектов "один таймер/одна задача" и используйте реальное время, чтобы сгладить анимации пользовательского интерфейса.
Код из ответа с примером
Вы можете использовать системные часы, чтобы компенсировать неточность таймера. Если вы запускаете функцию синхронизации как серию вызовов setTimeout - каждый экземпляр, вызывающий следующий, - тогда все, что вам нужно сделать, чтобы сохранить точность, - это точно определить, насколько это неточно, и вычесть это отличие от следующей итерации:
var start = new Date().getTime(),
time = 0,
elapsed = '0.0';
function instance()
{
time += 100;
elapsed = Math.floor(time / 100) / 10;
if(Math.round(elapsed) == elapsed) { elapsed += '.0'; }
document.title = elapsed;
var diff = (new Date().getTime() - start) - time;
window.setTimeout(instance, (100 - diff));
}
window.setTimeout(instance, 100);
(2) Библиотека Tock
А что в ней хорошего?
Когда я его буду использовать?
(3) Статья Джеймса Эдвардса
Асинхронные таймеры являются краеугольным камнем всех временных процессов в JavaScript. От очевидных вещей, таких как часы и секундомеры, до визуальных эффектов и анимации, синхронизированные задержки, которые жизненно важны для удобства использования выпадающих меню .
Но проблема с таймерами JavaScript заключается в том, что они не очень точны...