javascript - 单击时清除/重置绑定(bind)计时器/倒计时事件

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

      . . . . . . . . 

但是每当我单击按钮重置计时器时，它都不会完全清除第一个绑定(bind)的事件。

假设我在 2:39 时单击了按钮。timer/countdown 类 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 个名为间隔的变量。一种是全局的，一种是按钮 onclick 的本地的。那么您就错过了实际停止计时器的clearInterval()方法。那么空或者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.

更好的是创建一个函数并在页面加载和单击时调用它......而不是拥有两组完全相同的重复代码。像这样:

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.