javascript - script - ¿Hay alguna manera de matar un loop setInterval a través de un botón Onclick?

timer delay javascript

Question

Entonces, obtuve un bucle infinito para trabajar en esta función usando setInterval conectado a un onClick. El problema es que no puedo detenerlo usando clearInterval en un onClick. Creo que esto se debe a que cuando adjunto un clearInterval a un onClick, mata un intervalo específico y no la función por completo. ¿Hay algo que pueda hacer para eliminar todos los intervalos a través de un onClick?

Aquí está mi archivo .js y las llamadas que hago son

input type="button" value="generate" onClick="generation();

input type="button" value="Infinite Loop!" onclick="setInterval(''generation()'',1000);"

input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.

Answer 1

Tener generation(); llamar a setTimeout a sí mismo en lugar de setInterval . Eso fue lo que puedes usar un poco si la lógica en la función para evitar que ejecute setTimeout bastante facilidad.

var genTimer
var stopGen = 0

function generation() {
   clearTimeout(genTimer)  ///stop additional clicks from initiating more timers
   . . .
   if(!stopGen) {
       genTimer = setTimeout(function(){generation()},1000)
   }
}

}

Answer 2

setInterval devuelve un identificador, necesita ese identificador para que pueda borrarlo

más fácil, cree una var para el manejador en su cabezal html, luego, en su uso onclick use la var

// in the head
var intervalHandle = null;

// in the onclick to set
intervalHandle = setInterval(....

// in the onclick to clear
clearInterval(intervalHandle);

http://www.w3schools.com/jsref/met_win_clearinterval.asp

Answer 3

clearInterval se aplica al valor de retorno de setInterval , así:

var interval = null;
theSecondButton.onclick = function() {
    if (interval === null) {
       interval = setInterval(generation, 1000);
    }
}
theThirdButton.onclick = function () {
   if (interval !== null) {
       clearInterval(interval);
       interval = null;
   }
}