He configurado una función que se carga en el documento listo con el nombre myFunction. Hay 5 funciones en su interior con diferentes tiempos de espera. Quiero borrar el tiempo de espera de las funciones tercera y cuarta al hacer clic en un botón dentro de mi código html con id #btn. Aqui esta mi codigo

<doctype! HTML>
<html>
<head>
<title>
My Page
</title>
<script src="jquery-3.2.1.js">
<script src="myScript.js">
<script type="text/javascript">
$(document).ready(myFunction);
</script>
</head>
<body>
<button id="btn">
</body>
</html>

MyScript.js está debajo

function myFunction(){
setTimeout(function function1(){
 // do stuffs
}, 5000);
setTimeout(function function2(){
 // do stuffs
}, 10000);
setTimeout(function function3(){
 // do stuffs
}, 15000);
setTimeout(function function4(){
 // do stuffs
}, 20000);
setTimeout(function function5(){
 // do stuffs
}, 25000);
}
0
Anurag 31 oct. 2017 a las 21:34

3 respuestas

La mejor respuesta

Para borrar un tiempo de espera, debe asignarlo a una variable que contenga la referencia. Aquí hay un ejemplo:

var t1,t2,t3,t4,t5;

function myFunction(){
    t1 = setTimeout(function function1(){
     // do stuffs
    }, 5000);
    t2 = setTimeout(function function2(){
     // do stuffs
    }, 10000);
    t3 = setTimeout(function function3(){
     // do stuffs
    }, 15000);
    t4 = setTimeout(function function4(){
     // do stuffs
    }, 20000);
    t5 = setTimeout(function function5(){
     // do stuffs
    }, 25000);
}

function myClearFunction(){
    clearTimeout(t3);
    clearTimeout(t4);
}

Llame a myClearFunction() desde su botón para borrar los temporizadores tercero y cuarto.

2
Racil Hilan 31 oct. 2017 a las 18:39

SetTimeout devuelve un valor, guárdelo para el temporizador 3 y 4 y luego, al hacer clic en el botón, haga clic en cancelar. Asegúrese de verificar si los valores para 3-4 están definidos antes de llamar a clear en ellos.

Return Value:   A Number, representing the ID value of the timer that is set. Use this value with the clearTimeout() method to cancel the timer

De https://www.w3schools.com/jsref/met_win_settimeout.asp

1
Axar 31 oct. 2017 a las 18:39

Puede usar clearTimeout para esto. Aquí hay una demostración funcional:

var timer1 = setTimeout(function() {
  console.log('timer1');
}, 5000);
var timer2 = setTimeout(function() {
  console.log('timer2');
}, 10000);
var timer3 = setTimeout(function() {
  console.log('timer3');
}, 15000);
var timer4 = setTimeout(function() {
  console.log('timer4');
}, 20000);
var timer5 = setTimeout(function() {
  console.log('timer5');
}, 25000);

document.getElementById('x').addEventListener('click', function() {
  clearTimeout(timer3);
  clearTimeout(timer4);
});
<button id="x">Stop Timer 3 and 4</button>
2
Jon Uleis 31 oct. 2017 a las 18:40