2

给定以下代码：

    $('#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”时它都会“重新启动”而不会发疯？

4

2 回答 2

2

我同意。将计数器变量设为全局变量，并在单击 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/

希望有帮助。

于 2013-06-01T05:38:12.990 回答
1

使counter变量成为全局变量，然后将以下行添加到myButton03 click 函数应该可以解决问题。

clearInterval(counter);
于 2013-06-01T05:29:38.290 回答