1

Пытаюсь остановить видео спустя x миллисекунд, как это более точно? setTimeout слишком неточен.

function() {
    covervideo.play();
    setTimeout(function() {
      covervideo.pause();
    }, 1150);
  }
0

1 ответ 1

1

Подробный ответ есть на английском 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

А что в ней хорошего?

  • Чистый Javascript - никаких зависимостей
  • Время самокорректировки, основанное на системных часах, не будет выходить за пределы времени, в отличие от часов, основанных исключительно на setInterval или setTimeout.
  • Его можно использовать для подсчета с любого произвольного времени (или 0:00) или обратного отсчета с определенного времени.
  • Он может вызывать функцию обратного вызова каждый тик (10 миллисекунд) и (для обратного отсчета), когда часы достигают 0:00.
  • Это точно так же, как часы с Javascript.

Когда я его буду использовать?

  • Счетчики обратного отсчета, например. «сайт запустится ...»
  • Таймеры
  • Точное время любого повторного действия

(3) Статья Джеймса Эдвардса

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

Но проблема с таймерами JavaScript заключается в том, что они не очень точны...

2
  • Перевод сделал через гугл, так что речевые обороты переведены кривовато, но понятно 21 окт 2018 в 19:16
  • Спасибо большое! Особенно за ссылку на библиотеку tock!
    – Roman
    22 окт 2018 в 13:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.