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/