Question

我制作了一个简单的程序，每0.5秒增加一个数字。当我点击开始它完美的工作。但是当我点击重新启动时，增量就可以了，但它们不会每0.5秒递增一次并且速度非常快，当我调用相同的函数时会发生这种情况？ JS小提琴链接如下。

function 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

你必须为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);
});

再次调用SetInterval时不一样吗？

2 个答案: