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说，timer / 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

您有两个名为interval的变量。一种是全局的，一种是局部的onclick按钮。然后，您将丢失实际上停止计时器的clearInterval（）方法。然后不需要为空或关闭，您想在此处放置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.

点击时清除/重置绑定的计时器/倒数事件

1 个答案: