如何在倒计时工作时停止jquery事件

问题描述

我几乎不了解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开始。

如何阻止它？

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

解决方法

您需要存储间隔ID并使用clearInterval(intervalId);停止它。

function startTimer(duration,display) {
    var timer = duration,minutes,seconds;
    var intervalId = 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) {
            clearInterval(intervalId);
        }
    },1000);
    
}

$('.start').on('click',function(){
    var oneMinute = 60 * 1,display = document.querySelector('#time');
        startTimer(oneMinute,display);
})

,

setInterval函数返回一个标识符。将间隔ID存储在变量中。这样，您可以在需要时使用clearInterval()取消间隔。

function startTimer(duration,seconds;
    var interval = setInterval(function () {
        minutes = parseInt(timer / 60,10);

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

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

        if (--timer < 0) {
            
            clearInterval(interval);
        }
        
    },1000);
    
}
$('.start').on('click',function(){
    var oneMinute = 5 * 1,// 5 Seconds for easy testing
        display = document.querySelector('#time');
        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>