En este artículo, vamos a aprender cómo cambiar el tiempo de setInterval() después de ejecutar un elemento. El método setInterval() lee el tiempo una vez e invoca la función a intervalos regulares. Hay dos métodos para resolver este problema que se analizan a continuación:
Método 1: Usar el método clearInterval(): El método setInterval() devuelve un ID numérico. Este ID se puede pasar al método clearInterval() para borrar/detener el temporizador setInterval. En esta técnica, seguimos disparando clearInterval() después de cada setInterval() para detener el setInterval() anterior e inicializar setInterval() con un nuevo contador.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Change the Time Interval of
setinterval() Method after Running
one Element using JavaScript ?
</title>
</head>
<body>
<div id="message"></div>
<script>
// Output message
var msg = document.getElementById("message");
var t = 200; // Timer
// Stores the setInterval ID used by
// clearInterval to stop the timer
var interval;
f1();
// Function that changes the timer
function changeTimer(){
t = t * 1.2;
}
// Function that run at irregular intervals
function f1() {
// Clears the previous setInterval timer
clearInterval(interval);
msg.innerHTML += "
<p>Function Fired</p>
";
changeTimer();
interval = setInterval(f1, t);
}
</script>
</body>
</html>
Producción:
Método 2: Usando el método setTimeout(): Esta técnica es más fácil y simple que la anterior. El método setTimout() activa una función después de un período determinado. El temporizador es el tiempo después del cual queremos ejecutar nuestra función. En esta técnica, después de realizar la tarea deseada, cambiamos el valor del temporizador y volvemos a llamar a setTimeout(). Ahora, dado que el valor del temporizador cambia, cada llamada de función se invoca en diferentes intervalos.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Change the Time Interval of
setinterval() Method after Running
one Element using JavaScript ?
</title>
</head>
<body>
<div id="message"></div>
<script>
// To display output
var msg = document.getElementById("message");
// Timer
var t = 200;
f1();
// Function that changes the timer
function changeTimer(){
t = t * 1.2;
}
// Function to run at irregular intervals
function f1() {
msg.innerHTML += "
<p>Function Fired</p>
";
changeTimer();
setTimeout(f1, t);
}
</script>
</body>
</html>
Producción: