D3.js: API de temporizador
El módulo Timer API se utiliza para realizar animaciones simultáneas con retardo de tiempo sincronizado. UsarequestAnimationFramepara animación. Este capítulo explica en detalle el módulo Timer API.
requestAnimationFrame
Este método le dice al navegador que desea realizar una animación y solicita que el navegador llame a una función específica para actualizar una animación.
Configuración del temporizador
Podemos cargar fácilmente el temporizador directamente desde d3js.org usando el siguiente script.
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
var timer = d3.timer(callback);
</script>
Métodos de la API de temporizador
La API de Timer admite los siguientes métodos importantes. Todos estos se explican en detalle a continuación.
d3.now ()
Este método devuelve la hora actual.
d3.timer (devolución de llamada [, retraso [, tiempo]])
Este método se utiliza para programar un nuevo temporizador e invoca el temporizador hasta que se detiene. Puede establecer un retraso numérico en MS, pero es opcional, de lo contrario, el valor predeterminado es cero. Si no se especifica el tiempo, se considera d3.now ().
timer.restart (devolución de llamada [, retraso [, tiempo]])
Reinicie un temporizador con la devolución de llamada especificada y el retraso y el tiempo opcionales.
timer.stop ()
Este método detiene el temporizador y evita las devoluciones de llamada posteriores.
d3.timeout (devolución de llamada [, retraso [, tiempo]])
Se utiliza para detener el temporizador en su primera devolución de llamada. La devolución de llamada se transmite como el tiempo transcurrido.
d3.interval (devolución de llamada [, retraso [, tiempo]])
Se invoca en un intervalo de retardo de tiempo particular. Si no se especifica el retraso, toma el tiempo del temporizador.
Ejemplo
Cree una página web “timer.html” y agréguele el siguiente script.
<!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>
Veremos la siguiente respuesta en pantalla.