Модуль API таймера используется для одновременной анимации с синхронизированной задержкой. Он использует requestAnimationFrame для анимации. В этой главе подробно описывается модуль API таймера.
requestAnimationFrame
Этот метод сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию для обновления анимации.
Настройка таймера
Мы можем легко загрузить таймер напрямую из d3js.org, используя следующий скрипт.
<script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script> var timer = d3.timer(callback); </script>
Методы API таймера
API таймера поддерживает следующие важные методы. Все это подробно объясняется следующим образом.
d3.now ()
Этот метод возвращает текущее время.
d3.timer (обратный вызов [, задержка [, время]])
Этот метод используется для планирования нового таймера и вызывает таймер до его остановки. Вы можете установить числовую задержку в MS, но это необязательно, в противном случае по умолчанию устанавливается ноль. Если время не указано, оно считается d3.now ().
timer.restart (обратный вызов [, задержка [, время]])
Перезапустите таймер с указанным обратным вызовом и дополнительными задержкой и временем.
timer.stop ()
Этот метод останавливает таймер, предотвращая последующие обратные вызовы.
d3.timeout (обратный вызов [, задержка [, время]])
Он используется для остановки таймера при первом обратном вызове. Обратный вызов передается как истекшее время.
d3.interval (обратный вызов [, задержка [, время]])
Он вызывается в определенный интервал задержки. Если задержка не указана, требуется время таймера.
пример
Создайте веб-страницу «timer.html» и добавьте в нее следующий скрипт.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> Timer API </h3>
<script>
var timer = d3.timer(function(duration) {
console.log(duration);
if (duration > 150) timer.stop();
}, 100);
</script>
</body>
</html>
Мы увидим следующий ответ на экране.