d3-таймер

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

Установка

Если вы используете NPM, npm install d3-timer. В противном случае скачайте последнюю версию. Вы также можете загрузить его напрямую с d3js.org, либо как отдельную библиотеку, либо как часть 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 после задержки; если задержка не указана, она по умолчанию равна нулю. Задержка относится к указанному значению time в миллисекундах; если time не указан, он по умолчанию равен 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 получает время, прошедшее с момента запуска.