jQuery的复位定时器的setInterval

Question

我的Jquery：

function myTimer() { 
    var sec = 15 
    var timer = setInterval(function() { 
    $('#timer').text(sec--); 
    if (sec == -1) { 
     clearInterval(timer); 
     alert('done'); 
    } 
    } , 1000); 

} 

$("#knap").click(function() { 
    myTimer(); 
}); 

$("#reset").click(function() { 
// set timer to 15 sec again.. 
}); 

我希望计时器上#reset点击后复位。

Answer 1

你需要离开你的“定时器”变量的作用域是可用下次呼叫为myTimer功能，这样你就可以清除现有的间隔，并用新的区间重置时间。尝试：

var timer; 
functionn myTimer() { 
    var sec = 15 
    clearInterval(timer); 
    timer = setInterval(function() { 
    $('#timer').text(sec--); 
    if (sec == -1) { 
     clearInterval(timer); 
     alert('done'); 
    } 
    } , 1000); 

} 

$("#knap").click(function() { 
    myTimer(); 
}); 

$("#reset").click(function() { 
    myTimer(); 
}); 

Answer 2

清除每一个它的initalized时间的计时器，这样你所要做的就是再次调用该函数复位定时器：

var timer; 

function myTimer(sec) { 
    if (timer) clearInterval(timer); 
    timer = setInterval(function() { 
     $('#timer').text(sec--); 
     if (sec == -1) { 
      clearInterval(timer); 
      alert('done'); 
     } 
    }, 1000); 
} 

$("#knap, #reset").click(function() { 
    myTimer(15); 
}); 

FIDDLE

Answer 3

你可以重新写你的myTimer()功能就像这样：

function myTimer() { 
    var sec, timer = null; 

    myTimer = function() { 
     sec = 15; 
     clearInterval(timer); 

     timer = setInterval(function() { 
      $('#timer').text(sec--); 
      if (sec == -1) { 
       clearInterval(timer); 
       alert('done'); 
      } 
     } , 1000); 
    }; 

    myTimer(); 
} 

现在，无论何时ü打电话myTimer()，该setInterval被复位。

Answer 4

，或者你可以做这些方针的东西：

var myTimer = function(){ 
    var that = this, 
     time = 15, 
     timer; 
    that.set = function() { 
     console.log('setting up timer'); 
     timer = setInterval(function(){ 
      console.log('running time: ' + time); 
     },1000); 
    } 
    that.reset = function(){ 
     console.log('clearing timer'); 
     clearInterval(timer); 
    } 
    return that; 
}(); 

和运行时，你需要：

myTimer.set（）; myTimer.reset（）;

Answer 5

这里有一个办法，更符合JS设计（为那些谁还不知道函数式语言）的方式调整。而不是依靠一个全局变量，使用闭包：

$("#knap").click(function start()//named callback to bind && unbind: 
{ 
    $(this).unbind('click');//no need to start when started 
    $("#reset").unbind('click').click((function(timer) 
    {//timer is in scope thanks to closure 
     return function() 
     {//resets timer 
      clearInterval(timer); 
      timer = null; 
      $('#knap').click(start);//bind the start again 
      //alternatively, you could change the start button to a reset button on click and vice versa 
     } 
    })(setInterval((function(sec) 
     { 
      return function() 
      { 
       $('#timer').text(sec--); 
       if (sec === -1) 
       { 
        $('#reset').click();//stops interval 
        $('#reset').unbind('click');//no more need for the event 
        alert('done'); 
       }//here's the interval counter: 15, passed as argument to closure 
      })(15),1000)));//set interval returns timer id, passed as argument to closure 
}); 

现在，我承认这是相当混乱（和未经测试），但这种方式存在重置事件仅当它是必要的，你不使用任何全局变量。但最重要的，这就是JS的强大之处在于：作为第一类对象，将它们作为参数和返回值...只是去功能疯狂:)

我已经成立了一个工作Fiddle，太

Answer 6

你也可以使用一个jQuery插件计时器，那么你就需要绕过变量。

插件：http://archive.plugins.jquery.com/project/timers的插件

例子：http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/