当再次调用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); 
});