d3-таймер

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

Установка

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

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

var timer = d3.timer(callback);

</script>

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

d3.now() Исходный код

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

d3.timer(callback[, delay[, time]]) Исходный код

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

Функция callback получает (кажущееся) время с момента активации таймера. Например:

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 и других задач, выполняемых вашим компьютером.) Обратите внимание, что первое значение время составляет 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 получает время.