再次触发时，定时器走得快两倍

Question

我需要制作一个将整数放入数组的系统。但我有一个问题。当我单击 div 时，它起作用了，但是当我再次单击时，计时器的速度增加了一倍。我怎样才能避免这个问题？

代码：

    // JavaScript Document
// DIT STUK ZORGT VOORT HET CLICK EVENT BIJ FUNCTION INIT
function addListener(element, type, expression, bubbling) {
    if(window.addEventListener) { // Voor alle !IE browsers
    element.addEventListener(type, expression, bubbling);
    return true;
    } else if(window.attachEvent) { // Voor oude IE versies
    element.attachEvent('on' + type, expression);
    return true;
    } else {
    return false; }
}

var mijnArray = [];
var Timer;

// Bij het laden van de pagina
function init ()
{
    addListener (document.getElementById("resultaat"), 'click', startTimer, false);
}

// Deze functie start wanneer er double geklikt is op de div
function startTimer ()
{
    //alert('test');
    Timer = setInterval(function(){myTimer()},100); 
}

function myTimer () 
{
    // uitvoeren zolang aantal items kleiner is als 11
    if (mijnArray.length < 10)
    {   
        mijnArray.push(Math.floor((Math.random() * 10) + 1));
        console.log(mijnArray);
        document.getElementById('resultaat').innerHTML = mijnArray;
    }
    else
    {
        clearInterval(Timer);   
    }

}
















window.onload = init;

Answer 1

始终假设您的计时器是运行，在开始之前取消它

function startTimer() {
    clearInterval(Timer);
    Timer = setInterval(myTimer, 100); 
}

或者，始终保留间隔运行，但有一个控制是否发生任何事情的标志；

var do_something = false;

var Timer = setInterval(function () {
    if (do_something) myTimer(); // your function
}, 100);

function click_handler() {
    do_something = true;
}

与间隔一样，您可能需要考虑这样一种情况，即调用的函数完成所需的时间比间隔在重新调用它之前等待的时间更长。如果您遇到这种情况，请考虑使用 setTimeout

重写它

Answer 2

当您单击该按钮时，您正在设置一个时间间隔。但是，由于该按钮不知道其他时间间隔，因此当您单击该按钮时，您会创建一个新计时器，而不管旧计时器是否运行ning！

具体取决于您想要的行为：

在计时器运行时禁用按钮运行ning：您可以在单击按钮时从按钮上移除侦听器，直到计时器完成。（去掉startTimer末尾的监听器，在myTimer的else子句中调用init重新启用定时器按钮）
让按钮重新启动计时器：在再次启用计时器之前，只需在计时器上运行 clearInterval。

再次触发时，定时器走得快两倍

Timer goes twice as fast when triggered again

html

javascript

arrays

function

timer