倒计时时如何停止jquery事件答案

【问题标题】：How to stop jquery event while working on countdown倒计时时如何停止jquery事件
【发布时间】：2020-09-10 13:23:06
【问题描述】：

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

如何阻止它？

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

【问题讨论】：

我不明白这个平台上的人们是如何整天试图用“我几乎没有任何知识”或“我是新手”作为没有真正努力的借口。我们不是来为你们修复“找到”的代码。如果你想使用这个代码，那么你应该努力尝试并理解它是如何工作的。 jQuery 有很好的文档，所以你可以去阅读这样的东西。
问题是if (--timer < 0) { timer = duration; }，只需放置alert("Time stopped");查看更改
@CBroe 我只知道基本的，比如 onclick，选择器。我没有使用这个平台让其他开发人员解决我的问题。我试着做if(timer == -1){ return false; }，因为我没有写这段代码，我变得更加困惑。您无法仅通过阅读那里的文字来表达他们的问题来判断某人是否正在努力。不过，谢谢您的意见。
如果您确实尝试过任何事情，请立即在您的问题中提及。 “你不能仅仅通过阅读那里的文字来表达那里的问题来判断某人是否正在努力。” - 这正是为什么你应该做更多的事情，而不是只是表达问题。

标签： javascript jquery countdown countdowntimer

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您需要存储区间 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);
})

【讨论】：

您的代码运行良好。但是，只能投一票。有人已经为您的答案投票了，所以干杯！谢谢:-)