settimeout→ ejecuta una función después de esperar un cierto número de milisegundossetinterval→ 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 desetTimeout 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ónIniciar 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
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);
});
});
No hay comentarios:
Publicar un comentario