Páginas

▼
▼

jueves, 29 de agosto de 2019

JavaScipt timers: setinterval, settimeout

Veamos los controladores de tiempo en JavaScript. Los timers son:
  • settimeout → ejecuta una función después de esperar un cierto número de milisegundos
  • setinterval → permite ejecutar una función cada cierto intervalo de forma repetitiva

setTimeout + clearTimeout


https://repl.it/@valoro/JS-setTimeout

HTML

Disponemos de dos botones, uno para iniciar el proceso de setTimeout y otro para interrumpirlo con clearTimeout.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Interrumpir</button>  
  </body>  
 </html>

JavaScript +jQuery

Pulsando el botón Iniciar lanzamos setTimeout que lanzar una función flecha que lanza un alert que dice Hola con un retardo de 2000 milisegundos. Si deseamos interrumpir el alert antes de que se produzca debemos pulsar el botón Interrumpir que lanzará clearTimeout.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setTimeout(() => alert("Hola"), 2000);  
  });  
  $("#b2").click(function(){  
    clearTimeout(tiempo);  
  });  
 });

setInterval + clearInterval

Versión 1

https://repl.it/@valoro/JS-setInterval1

HTML

Disponemos de dos botones.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Finalizar</button>  
  </body>  
 </html>

JavaScript +jQuery

Al pulsar el botón Iniciar, cada segundo se imprime por consola la palabra Hola. El proceso se detiene al pulsar el botón Finalizar.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setInterval(mifuncion,1000);  
   function mifuncion(){  
    console.log("Hola");  
   }  
  });  
  $("#b2").click(function(){  
    clearInterval(tiempo);  
  });  
 });

Versión 2

Alterna el color del texto cada 500 milisegundos

https://repl.it/@valoro/JS-setInterval2


HTML

Dos botones y un h1.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1>Bienvenidos al mundo del cambio</h1>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Finalizar</button>  
  </body>  
 </html>

JavaScript + jQuery

Creamos una variable auxiliar booleana para controlar cómo se alterna entre los dos colores.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setInterval(mifuncion,500);  
   var aux=true;  
   function mifuncion(){  
    if (aux){  
     $('h1').css("color","blue");  
     aux=false;  
    }else{  
     $('h1').css("color","red");  
     aux=true;  
    }  
   }  
  });  
  $("#b2").click(function(){  
    clearInterval(tiempo);  
  });  
 });

Nota

En el siguiente caso puede ver cómo se alterna un texto entre colores al pulsar reiteradamente un único botón. Es lo que se denomina toggle (palanca).
en

No hay comentarios:

Publicar un comentario