Javascript ClearTimeout 不起作用

Question

我正在为我的代码寻找解决方案。我的 clearTimeout 函数在 stop() 中不起作用；和开始（）；功能，有人知道如何解决这个问题吗？

停止、启动和重置按钮都具有 setTimeout 功能。我想做的是，如果单击其中一个按钮，则其他两个按钮具有cleartimeout。但不知何故，它现在不起作用。

var isTimerStarted;
var timeOutElse;
var timeOut;
var opnieuw;

function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
    isTimerStarted = true;
    timeOutElse = setTimeout(function(){
        document.getElementById("scherm3").style.display = "block";
        document.getElementById("scherm2.2").style.visibility = "hidden";
    }, 8000)
}

function stop() {
    x.stop();
    clearInterval(clocktimer);
    isTimerStarted = false;
    timeOut = setTimeout(function(){
        document.getElementById("scherm4").style.visibility = "visible";
        document.getElementById("scherm2.2").style.visibility = "hidden"; 
    }, 4000)
}

function reset() {
    stop();
    x.reset();
    update();
    opnieuw = setTimeout(function(){
        document.getElementById("scherm3").style.display = "block";
        document.getElementById("scherm2.2").style.visibility = "hidden"; 
    }, 10000);    
    clearTimeout(timeOut);
    clearTimeout(timeOutElse);
    document.getElementById("buttontimer").value = "Start";
} 

setTimeout(start, 5000);

function toggleTimer(event) {
    if (isTimerStarted) {
        stop();
        event.target.value = 'Start';
        clearTimeout(opnieuw);
        clearTimeout(timeOutElse);
    } else {
        start();
        event.target.value = 'Stop';
        clearTimeout(opnieuw);
        clearTimeout(timeOut);
    }
 }

Answer 1

据我所知，您的代码没有任何问题。

但我认为您可能忘记从中删除一行。

setTimeout(start, 5000); 会在 5 秒后创建超时，无论何时/无论何时单击某个事物。

这可能会造成时间问题。

这是一个可能发生的场景：

• 你点击
• toggleTimer() -> start() -> 创建超时和间隔
• 5 秒后您的 setTimeout(start, 5000) 执行并重新分配您的超时和间隔变量
• 你重新点击
• 最新的超时和间隔被清除，但不是第一个

为了安全起见，您可以在每个函数的开头清除在所述函数中创建的超时和间隔。

这样，您将始终清除创建的超时和间隔。