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

单击该按钮时，您将设置间隔。但是，由于按钮不知道其他间隔，当您单击该按钮时，无论旧的是否正在运行，您都会创建一个新的计时器！

取决于您想要的行为：

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

再次触发时，定时器的速度提高两倍

2 个答案: