d3-таймер

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

Установка

Если вы используете NPM, npm install d3-timer. В противном случае загрузите последнюю версию. Вы также можете загрузить напрямую с d3js.org, как самостоятельную библиотеку standalone library или как часть D3 4.0. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla среде экспортируется глобальная переменная d3.

<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script>

var timer = d3.timer(callback);

</script>

Попробуйте d3-таймер в вашем браузере.

Справочник API

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

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

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

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

Функции callback передаётся (видимое) время elapsed с момента активации таймера. Например:

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

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

3
25
48
65
85
106
125
146
167
189
209

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

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

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

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

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

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

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

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

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

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

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

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