SetInterval не то же самое при повторном вызове?

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);
});