Función de temporizador D3.js()

La función D3.timer() se usa para ejecutar una función de temporizador después de un intervalo de tiempo particular. El temporizador se ejecutará después de un retraso especificado. El retraso dado es en milisegundos.

Sintaxis:

d3.timer(callback, delay);

Parámetros: Toma los siguientes dos parámetros.

  • devolución de llamada: Es una función.
  • retraso: Es el retraso después del cual se ejecuta la función.

Devoluciones: Devuelve la Hora del tipo de dato Número.

A continuación se dan algunos ejemplos de la función anterior.

Ejemplo 1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
</style>
<body>
  <!-- Fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src = "https://d3js.org/d3.v4.min.js">
  </script>
  <script>
  let func=function(elapsed) {
      console.log(elapsed);
      if (elapsed > 500){
        console.log("Timer stopped")
        timer.stop();
      }
    }
   var timer = d3.timer(func);
  </script>
</body>
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <!-- Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js">
  </script>
  <script>
  let func=function(e) {
      console.log(e);
      if (e>300){
        console.log("Timer stopped")
        timer.stop();
      }
    }
    // Delay of 2000ms
   var timer = d3.timer(func, 2000);
  </script>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por TARuN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *