La función d3.interval() se usa para llamar a la función después de cada intervalo de tiempo o retraso dado. Si no se proporciona el retraso, entonces el retraso es igual al temporizador.
Sintaxis:
d3.interval(callback, delay);
Parámetros: Toma los dos parámetros mencionados anteriormente y descritos a continuación:
- devolución de llamada: Es la función que se ejecutará después de un retraso determinado.
- retraso: Es el retraso después del cual se ejecuta la función.
Devoluciones: Devuelve un objeto.
Nota: La salida puede ser diferente cada vez que se ejecuta el código.
Ejemplo 1: Cuando no se da ningún retraso.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.originalColor {
height: 100px;
width: 100px;
}
.darkerColor {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<!-- Fetching from CDN of D3.js -->
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<script>
let count = 0;
let func = function (e) {
count++;
console.log(e);
console.log("Time interval will "
+ "stop when count is greater 5"
+ "current count: ", count);
if (count > 5)
timer.stop()
}
var timer = d3.interval(func);
</script>
</body>
</html>
Producción:
Ejemplo 2: Cuando se da un retraso.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.originalColor {
height: 100px;
width: 100px;
}
.darkerColor {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<!-- Fetching from CDN of D3.js -->
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<script>
let count = 0;
console.log("The delay is 500ms.");
let func = function (e) {
count++;
console.log(e);
console.log("Time interval will "
+ "stop when count is greater 3"
+ " current count: ", count);
if (count > 3)
timer.stop()
}
var timer = d3.interval(func, 500);
</script>
</body>
</html>
Producción:
