d3-timer

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

Установка

Если вы используете npm, npm install d3-timer. Вы также можете загрузить последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-timer из Skypack:

<script type="module">

import {timer} from "https://cdn.skypack.dev/d3-timer@3";

const t = timer(callback);

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-timer с CDN на основе npm, например, jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-timer@3"></script>
<script>

const timer = d3.timer(callback);

</script>

Справочник по API

d3.now() Источник

Возвращает текущее время, определенное performance.now, если доступно, и Date.now в противном случае. Текущее время обновляется в начале кадра; таким образом, оно согласовано в течение кадра, а любые таймеры, запланированные в течение этого же кадра, будут синхронизированы. Если этот метод вызывается вне кадра, например, в ответ на событие пользователя, текущее время вычисляется и затем фиксируется до следующего кадра, опять же гарантируя согласованное время во время обработки событий.

d3.timer(callback[, delay[, time]]) Источник

Планирует новый таймер, вызывая указанную функцию callback повторно, пока таймер не остановлен. Можно указать необязательную числовую задержку в миллисекундах, чтобы вызвать указанную функцию callback через задержку; если задержка не указана, по умолчанию она равна нулю. Задержка относительна к указанному времени в миллисекундах; если время не указано, оно по умолчанию равно now.

Функция callback получает прошедшее время с момента активации таймера. Например:

const t = d3.timer((elapsed) => {
  console.log(elapsed);
  if (elapsed > 200) t.stop();
}, 150);

Это приводит примерно к следующему выводу консоли:

3
25
48
65
85
106
125
146
167
189
209

(Точные значения могут варьироваться в зависимости от вашей JavaScript-среды и того, чем еще занят ваш компьютер.) Обратите внимание, что первое прошедшее время составляет 3 мс: это время, прошедшее с момента запуска таймера, а не с момента его планирования. Здесь таймер начал работать через 150 мс после планирования из-за указанной задержки. Видимое прошедшее время может быть меньше истинного прошедшего времени, если страница находится в фоновом режиме, и requestAnimationFrame приостановлен; в фоновом режиме видимое время замирает.

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

timer.restart(callback[, delay[, time]]) Источник

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

timer.stop() Источник

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

d3.timerFlush() Источник

Немедленно вызывает все допустимые функции обратного вызова таймера. Обратите внимание, что таймеры с нулевой задержкой обычно выполняются только после одного кадра (~17 мс). Это может вызвать кратковременную мерцание, потому что браузер рендерит страницу дважды: один раз в конце первой очереди событий, а затем сразу же при первом вызове функции обратного вызова таймера. Выполняя очистку очереди таймера в конце первой очереди событий, вы можете выполнить все таймеры с нулевой задержкой немедленно и избежать мерцания.

d3.timeout(callback[, delay[, time]]) Источник

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

d3.interval(callback[, delay[, time]]) Источник

Подобно timer, за исключением того, что функция callback вызывается только каждые delay миллисекунд; если delay не указан, это эквивалентно timer. Подходящая замена для setInterval, которая гарантированно не будет работать в фоновом режиме. Функция callback получает прошедшее время.