Clearing/Resetting 绑定 Timer/Countdown 单击事件

Question

我有一个这样的脚本：

<span class="countdown">5:00</span>

<script type="text/javascript">
$(document).ready(function() {
    var timer2 = "5:01";
    var interval = setInterval(function() {
        var timer = timer2.split(':');
        //by parsing integer, I avoid all extra string processing
        var minutes = parseInt(timer[0], 10);
        var seconds = parseInt(timer[1], 10);
        --seconds;
        minutes = (seconds < 0) ? --minutes : minutes;
        if (minutes < 0) clearInterval(interval);
        seconds = (seconds < 0) ? 59 : seconds;
        seconds = (seconds < 10) ? '0' + seconds : seconds;
        //minutes = (minutes < 10) ?  minutes : minutes;
        $('.countdown').html(minutes + ':' + seconds);
        timer2 = minutes + ':' + seconds;
    }, 1000);
});
</script>

在同一页面上，我有一个按钮，作为其功能的一部分，它应该重置计时器。

$('#liveorderfeedwidget').on('click', function() {
            $(".countdown").empty();
            $('.countdown').off();
            var timer2 = "5:01";
            var interval = setInterval(function() {
                var timer = timer2.split(':');
                //by parsing integer, I avoid all extra string processing
                var minutes = parseInt(timer[0], 10);
                var seconds = parseInt(timer[1], 10);
                --seconds;
                minutes = (seconds < 0) ? --minutes : minutes;
                if (minutes < 0) clearInterval(interval);
                seconds = (seconds < 0) ? 59 : seconds;
                seconds = (seconds < 10) ? '0' + seconds : seconds;
                //minutes = (minutes < 10) ?  minutes : minutes;
                $('.countdown').html(minutes + ':' + seconds);
                timer2 = minutes + ':' + seconds;
            }, 1000);

      . . . . . . . .

但是每当我点击重置定时器的按钮时，它并没有完全清除第一个绑定的事件。

假设我在 2:39 处单击按钮。定时器/countdown class span闪烁，表示5:00，然后像这样连续循环

2:39 5:00 2:38 4:59 2:37 4:58 等等等等

显然，我的重置按钮计时器中的 $(".countdown").empty(); 和 $('.countdown').off(); 没有按预期工作。

完全清除之前的事件并将 .countdown 刷新到完全重置状态需要什么？

编辑：

这是一个完整的 jsfiddle，其中包含观察到的问题：

https://jsfiddle.net/fw6Lzm0o/

Answer 1

您有 2 个名为 interval 的变量。一种是全局的，一种是按钮 onclick 局部的。然后你错过了实际停止计时器的 clearInterval() 方法。那么empty或者off就不需要了，你要放5:00那里。

这里是需要修改的代码：

$('#liveorderfeedwidget').on('click', function() {
  $(".countdown").html('5:00');
  //$(".countdown").empty();
  //$('.countdown').off();
  var timer2 = "5:01";
  clearInterval(interval); //clear the timer
  interval = setInterval(function() {
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
  }, 1000);
});

Here is the working fiddle.

更好的方法是创建一个函数并在页面加载和单击时调用它...而不是使用 2 组完全相同的代码。像这样：

var timer2, interval;
startTimer();

$('#liveorderfeedwidget').on('click', function() {
  clearInterval(interval);
  startTimer();
});

function startTimer() {
  timer2 = "5:01";
  $(".countdown").html('5:00');
  interval = setInterval(function() {

    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    // minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
  }, 1000);

}

Here is the working fiddle for this.

Clearing/Resetting 绑定 Timer/Countdown 单击事件

Clearing/Resetting Bound Timer/Countdown Event On Click

javascript

jquery

event-handling

jquery-events