Есть ли способ убить цикл setInterval через кнопку Onclick

Question

Итак, я получил бесконечный цикл для работы в этой функции, используя setInterval, прикрепленный к onClick. Проблема в том, что я не могу остановить это с помощью clearInterval в onClick. Я думаю, это потому, что когда я присоединяю clearInterval к ​​onClick, он убивает определенный интервал, а не функцию в целом. Что я могу сделать, чтобы убить все интервалы через onClick?

Вот мой .js файл , и звонки, которые я делаю,

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

setInterval возвращает дескриптор, вам нужен этот дескриптор, чтобы вы могли очистить его

проще всего, создайте переменную для дескриптора в вашей html-заголовке, затем в своем клике используйте переменную

// 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 2

clearInterval применяется к возвращаемому значению setInterval, например:

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

Answer 3

Имейте generation();, звоните setTimeout себе вместо setInterval. Таким образом, вы можете немного использовать логику в функции, чтобы она не вызывала setTimeout довольно легко.

var genTimer
var stopGen = 0

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

}