如何在进行倒计时时停止 jquery 事件

Question

我几乎不了解jquery。我正在尝试倒计时，所以在搜索后我找到了下面的代码。

function startTimer(duration, display) {

    var timer = duration, minutes, seconds;

    setInterval(function () {

        minutes = parseInt(timer / 60, 10)

        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;

        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {

            

            timer = duration;

        }

    }, 1000);

    

}

$('.start').on('click', function(){

    var oneMinute = 60 * 1,

        display = document.querySelector('#time');

        startTimer(oneMinute, display);

})

但是倒计时会在一分钟后重复。就像 03、02、01 一样，它又从 59 开始。

如何阻止它？

我想在给定的分钟后提醒消息并停止计时器。

Answer 1

该setInterval函数返回一个标识符。将间隔 ID 存储在变量中。这允许您在需要时使用clearInterval()取消间隔。function startTimer(duration, display) {&nbsp; &nbsp; var timer = duration, minutes, seconds;&nbsp; &nbsp; var interval = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; minutes = parseInt(timer / 60, 10)&nbsp; &nbsp; &nbsp; &nbsp; seconds = parseInt(timer % 60, 10);&nbsp; &nbsp; &nbsp; &nbsp; minutes = minutes < 10 ? "0" + minutes : minutes;&nbsp; &nbsp; &nbsp; &nbsp; seconds = seconds < 10 ? "0" + seconds : seconds;&nbsp; &nbsp; &nbsp; &nbsp; display.textContent = minutes + ":" + seconds;&nbsp; &nbsp; &nbsp; &nbsp; if (--timer < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }, 1000);&nbsp; &nbsp;&nbsp;}$('.start').on('click', function(){&nbsp; &nbsp; var oneMinute = 5 * 1, // 5 Seconds for easy testing&nbsp; &nbsp; &nbsp; &nbsp; display = document.querySelector('#time');&nbsp; &nbsp; &nbsp; &nbsp; startTimer(oneMinute, display);})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="time">00:00</div><button type="button" class="start">START</button>

Answer 2

您需要存储间隔 ID 并用于clearInterval(intervalId);停止它。function startTimer(duration, display) {&nbsp; &nbsp; var timer = duration, minutes, seconds;&nbsp; &nbsp; var intervalId = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; minutes = parseInt(timer / 60, 10)&nbsp; &nbsp; &nbsp; &nbsp; seconds = parseInt(timer % 60, 10);&nbsp; &nbsp; &nbsp; &nbsp; minutes = minutes < 10 ? "0" + minutes : minutes;&nbsp; &nbsp; &nbsp; &nbsp; seconds = seconds < 10 ? "0" + seconds : seconds;&nbsp; &nbsp; &nbsp; &nbsp; display.textContent = minutes + ":" + seconds;&nbsp; &nbsp; &nbsp; &nbsp; if (--timer < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(intervalId);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 1000);&nbsp; &nbsp;&nbsp;}$('.start').on('click', function(){&nbsp; &nbsp; var oneMinute = 60 * 1,&nbsp; &nbsp; &nbsp; &nbsp; display = document.querySelector('#time');&nbsp; &nbsp; &nbsp; &nbsp; startTimer(oneMinute, display);})