Таймер обратного отсчета не останавливается с помощью clearInterval ()

Question

У меня проблема с тем, чтобы таймер обратного отсчета остановился на нуле, чтобы время не отображалось как отрицательное значение. Вызывается console.log и работает нормально, но по какой-то причине clearInterval() нет. Это сводит меня с ума, и я близок к тому, чтобы бросить.

const timerContainer = document.getElementById('timerContainer');   

const THREEMINUTES = 60 * 0.1;//5 seconds for testing
	
startTimer(THREEMINUTES, timerContainer);

function startTimer(duration, display) {

		let start = Date.now();
		let diff, min, sec;

		let timer = () => {
			diff = duration - (((Date.now() - start) /        1000) | 0);
			//use bitwise to truncate the float
			min = (diff / 60) | 0;
			sec = (diff % 60) | 0;

			min = min < 10 ? '0' + min : min;
			sec = sec < 10 ? '0' + sec : sec;

			display.textContent = min + ':' + sec;

			if (diff <= 0) {
				stopTimer();
				submit.disabled = 'true'; 
			};

		};

		//call timer immediately otherwise we wait a      full second
		timer();
		setInterval(timer, 1000);

		function stopTimer() {
			clearInterval(timer);
    	console.log("time's up", diff);
    };
}

<div id="timerContainer"></div>

Answer 1

Вы не сохраняете результат setInterval(timer, 1000);

Вы должны использовать это:

let timerId;
timer();
timerId = setInterval(timer, 1000);

function stopTimer() {
    clearInterval(timerId);
    console.log("time's up", diff)
};

Как вы можете видеть, результатом setInterval является число (объект в узле), и все, что вам нужно сделать, это передать это значение в clearInterval, таким образом, мы сохраняем значение в переменной timerId для ссылка. * * +1010

Answer 2

Код исправлен Убедитесь, что вы исправили свой код кнопки отправки. Сначала вы должны присвоить значение setInterval переменной. Эта переменная используется при вызове clearInterval, который очищает интервал.

const timerContainer = document.getElementById('timerContainer');   

const THREEMINUTES = 60 * 0.1;//5 seconds for testing

startTimer(THREEMINUTES, timerContainer);
var timer = null;
function startTimer(duration, display) {

        let start = Date.now();
        let diff, min, sec;

        let timer = () => {
            diff = duration - (((Date.now() - start) /        1000) | 0);
            //use bitwise to truncate the float
            min = (diff / 60) | 0;
            sec = (diff % 60) | 0;

            min = min < 10 ? '0' + min : min;
            sec = sec < 10 ? '0' + sec : sec;

            display.textContent = min + ':' + sec;

            if (diff <= 0) {
                stopTimer();
                submit.disabled = 'true'; 
            };

        };

        //call timer immediately otherwise we wait a      full second
        timer();
        timer = setInterval(timer, 1000);

        function stopTimer() {
            clearInterval(timer);
        console.log("time's up", diff);
    };
}

Answer 3

Не передавайте функцию, которую вы хотите остановить, на clearInterval().

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

// Function that the timer will invoke
function callback(){
    . . .
}

// Set up and initiate a timer and capture a reference to its unique ID
var timerID  = setInterval(callback, 1000);

// When needed, cancel the timer by passing the reference to it
clearInterval(timerID);