倒数计时器不使用 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

不要将要停止的函数传递给 clearInterval()。

传递对您启动的计时器的引用，因此您需要确保在启动计时器时捕获对将从中返回的 ID 的引用.

// 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);

Answer 2

您没有保存 setInterval(timer, 1000);

的结果

你应该使用这个：

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

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

如您所见，setInterval的结果是一个数字（节点中的对象），然后您需要做的就是将该值传递给clearInterval，因此我们将值保存在变量timerId供参考。

Answer 3

代码已修复，请确保修复提交按钮代码。您应该首先将 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);
    };
}

倒数计时器不使用 clearInterval() 停止

Countdown Timer not Stopping with clearInterval()

javascript

clearinterval