當再次調用SetInterval不一樣？

Question

我在做一個簡單的程序，每0.5秒增加一個數字。當我點擊開始它完美的作品。但是，當我點擊重新啓動時，增量會很好，但它們不會每0.5秒增加一次並且速度非常快，而且當我調用相同的函數時會發生這種情況？下面的JS小提琴鏈接。

功能runFunc（）{

Answer 1

聲明變量區間之外功能

var myInterval = null; 

檢查，如果時間間隔已經在運行，如果是清除它，以避免多區間運行相同的功能，這使得在間隔成了看起來比第一次，它被稱爲

if (myInterval != null) { 
    clearInterval(myInterval); 
} 

也更快，這是不正確

clearInterval(varName); 

的參數應該是一個區間是這樣

clearInterval(myInterval); 

使你的JavaScript代碼會是這樣

var myInterval = null; 

function runFunc(){ 
    $('#counter').val(zero); 
    var varName = function(){ 
     var number = Number($('#number').val()); 
     var counter = Number($('#counter').val()); 
     if(counter < number) { 
      counter++; 
      console.log(counter); 
      $('#counter').val(counter); 
     } else { 
      clearInterval(myInterval); 
     } 
    }; 
    //check if an interval is already running if yes clear it 
    if (myInterval != null) { 
     clearInterval(myInterval); 
    } 
    myInterval = setInterval(varName, 500); 
}; 

show.click(runFunc); 

reset.click(function(){ 
    $('#number').val(zero); 
    $('#counter').val(zero); 
}); 

restart.click(runFunc); 

Answer 2

u必須聲明一個變量爲的setInterval像「setIntervalID」

所以停止它clearInterval（「setIntervalID」）;

JSFIDDLE

var initialNumber = 10; 
var zero = 0; 
$('#number').val(initialNumber); 
$('#counter').val(zero); 
var show = $('#show'); 
var reset = $('#reset'); 
var restart = $('#restart'); 
var setIntervalID; 
// console.log('initial value of number is ' + number); 
// console.log(typeof number); 
// console.log('initial value of counter is ' + counter); 

var varName = function(){ 
     var number = Number($('#number').val()); 
     var counter = Number($('#counter').val()); 
     if(counter < number) { 
      counter++; 
      console.log(counter); 
      $('#counter').val(counter); 
     } 
    } 

function runFunc(){ 
     $('#counter').val(zero); 
     setIntervalID = setInterval(varName, 500); 
}; 
function stopFunc(){ 
    clearInterval(setIntervalID); 
}; 

function restartGO(){ 

stopFunc(); 
runFunc(); 
} 

show.click(runFunc); 
restart.click(restartGO); 

reset.click(function(){ 
    $('#number').val(zero); 
    $('#counter').val(zero); 
});