How to stop the function on js?

Question

Created a simple Timer

function timer() { setInterval(function timer() { var label = document.getElementById('label'); label.innerHTML = parseInt(label.innerHTML) + 1; }, 1000); }

So how can you stop it inside another function? Without using jQuery!

setInterval - returns the timer id to which you can apply clearInterval, but since now all this remains inside the timer function - there is nothing to be applied to clearInterval

Accepted Answer · 2016-08-29T20:31:42

 var i = 0; var timerId = 0; function timer() { timerId = setInterval(function () { //Здесь код в цикле console.log(i++); }, 1000); } function stopTimer(){ clearInterval(timerId); }

 <input type="button" value="StartTimer" onclick="timer()" /> <br> <input type="button" value="StopTimer" onclick="stopTimer()" />

setInterval returns the id to be sent to clearInterval (id), in order to stop, see the example

Well, I want to stop the function by clicking, but not after a certain amount of time

Answer 2 · 2016-08-29T20:35:32

The setTimeout and setInterval functions return an identifier that can be passed to the clearTimeout and clearInterval stop timer functions, respectively.
You just need to save the returned id and, if necessary, pass it to the cleaning function.
For example:

 function timer() { // Сохраняем в свойстве объекта функции, индивидуально и внешние переменные не нужны timer.id = setInterval(() => { let label = document.querySelector('#label'); label.innerHTML = (parseInt(label.innerHTML) || 0) + 1; }, 1000); } // По клику запускаем таймер document.querySelector('#start').addEventListener('click', e => timer()); // По клику запускаем функцию очистки, т. к. timer.id - не приватное свойство // PS Кнопкой старта можно продолжить счёт document.querySelector('#stop').addEventListener('click', e => clearInterval(timer.id));

 <div id='label'>0</div><br /> <input type='button' id='start' value='Start!' /><br /> <input type='button' id='stop' value='Stop!' />

@arthru, of course - just do not start the timer(); function timer();
Then you need to call it where you need - a click handler, March 5th on the clock or 4:30 on the calendar.

How to stop the function on js?

2 answers 2

More articles: