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

Прежде чем я начну объяснять свою мысль, у меня к вам вопрос: можете ли вы пользоваться часами, которые показывают неправильное время?

Если ваш ответ «да», мне жаль, что я потратил ваше драгоценное время, поскольку эта статья вам не принадлежит.

С другой стороны, если ваш ответ отрицательный, я объясню, почему использование setTimeout или setInterval похоже на использование поврежденных часов для определения времени.

Проблема с этими функциями

Для начала давайте рассмотрим следующий фрагмент

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


если вы запустите этот фрагмент в консоли браузера, вы получите следующий результат 



Такое поведение связано с тем, что setTimeout добавляет обратный вызов в очередь браузера, чтобы он мог обработать его, когда он простаивает. (у него нет задачи) другими словами, обратный вызов переданный в setTimeout имеет низкий приоритет

Теперь, зная это, я предполагаю, что вам будет сложно реализовать таймеры с помощью функции setTimeout, потому что вы можете иметь 2 или даже 10 тиков (в зависимости от того, насколько загружен ваш браузер) одновременно. Это будет кошмар для отладки, но есть ли у нас лучшее решение?

  
  
  Способ избежать этих функций


Чтобы обеспечить лучший способ реализации таймеров, мы должны использовать функцию requestAnimationFrame, поскольку она сообщает браузеру выполнить обратный вызов перед следующей отрисовкой  (другими словами, до того, как произойдет какое-либо изменение в пользовательском интерфейсе)

Разница здесь довольно тонкая, поэтому лучше понять ее через код. Давайте вернемся к нашему предыдущему фрагменту и немного подправим его, чтобы сравнить setTimeout и requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


В этом примере мы видим, что при запуске в Chrome setTimeout выполняется до requestAnimationFrame (хотя в некоторых редких случаях происходит обратное)



Но если вы запустите его в Firefox, результат будет такой



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

Теперь, если мы сможем настроить наш фрагмент так, чтобы браузер перерисовывал страницу, посмотрим, что произойдет

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Вот результат работы Chrome



А вот вывод в Firefox



Как видно из журналов, когда браузер вносит изменения в пользовательский интерфейс, функция requestAnimationFrame всегда будет иметь приоритет над другими запланированными обратными вызовами.

Поскольку в Интернете мы постоянно выполняем перерисовку, requestAnimationFrame — очевидный выбор для реализации таймеров.

  
  
  Понимание функции requestAnimationFrame


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

Функция вернет целое число, представляющее идентификатор запроса. Это может быть полезно, если вы хотите отменить запрос с помощью функции cancelAnimationFrame.

  
  
  Простая реализация секундомера в JavaScript


Для реализации секундомера существуют некоторые требования:

• Мы должны знать, через какое время он должен оттикать (обычно секунду)
• Мы должны знать задержку времени, после которой секундомер должен перестать тикать
• Интервалы тикания должны быть меньше задержки

Учитывая все эти требования, следующий фрагмент кода создаст для вас секундомер.

Аутро

Я знаю, что чтение, возможно, было долгим, но поверьте, вам оно понравилось. В любом случае, если у вас есть какие-либо вопросы или предложения, не стесняйтесь обращаться ко мне.

Спасибо, что прочитали, и до свидания ?