停止倒数计时器 Javascript onClick答案

【问题标题】：Stop Countdown Timer Javascript onClick停止倒数计时器 Javascript onClick
【发布时间】：2013-06-01 05:12:05
【问题描述】：

给定以下代码：

    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#counter').animate({width: 'toggle'});
        var count=65;
        var counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count <= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " segs.";}
    });

    $('#myButton03').click(function(){
        recognition.stop();
        $('#myButton02').show();
        $('#counter').toggle();
    });

我可以有以下工作流程：

用户单击一个按钮，该按钮被另一个按钮替换。
一个 div 出现，倒计时为 65 秒。

如果用户单击另一个按钮（替换第一个按钮的那个），第一个按钮会再次出现，隐藏第二个按钮，然后出现的 div (#counter) 消失。 问题是，当用户再次单击第一个按钮时，倒计时计时器会发疯并开始切换随机数而不是开始新的倒计时（仅当用户在第一个倒计时停止之前再次单击它时） .

如何让计时器在单击 "#myButton03" 时停止倒计时，以便每次单击 "#myButton02" 时它都会“自行重启”而不会发疯?

【问题讨论】：

你能提供一个小提琴吗？
您需要在重新设置之前清除计数器间隔，否则您将有多个间隔触发。
@BlakePlumb 我知道，但我不知道该怎么做，你能提供答案吗？
@Jmlevick，刚刚发布了一个小提琴。希望这会有所帮助。
是的！在阅读了布莱克的回答后刚刚解决了这个问题，我有一个问题，罗伯特的方法和在我现有的“计数”变量前加上“窗口”有什么区别？两种方法都将其转换为全局变量，并且代码按预期工作。

标签： javascript jquery

【解决方案1】：

我同意。将计数器变量设为全局变量，并在单击 myButton03 时将其重置。请参阅此小提琴与您的代码的修改版本，了解这样做的可能方式：

var count;
var counter;

function resetEverything()
{
    $("#counter, #myButton03").hide();
    $('#myButton02').show();
    clearInterval(counter);  
}

$(document).ready(function(){
    resetEverything();
    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#myButton03').show();
        $('#counter').animate({width: 'toggle'});
        count=65;
        counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count <= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " secs.";}
    });

    $('#myButton03').click(function(){
        resetEverything();
    });
});

http://jsfiddle.net/Xd3UR/

希望对您有所帮助。

【讨论】：

【解决方案2】：

将counter 变量设为全局变量，然后将以下行添加到myButton03 点击功能应该可以解决问题。

clearInterval(counter);

【讨论】：