javascript - 当我清除 div 时无法停止超时

Question

嘿，我有一个setTimeOut();

它一遍又一遍地调用自己。

问题是我想在用户关闭给定的 div 时清除它，但是我不知道如何通过使用正在运行的超时 id 使用 clearTimeout() 中止它.

这是我的函数的示例:

upgrade(end , new Date().getTime() / 1000 ,text,false);
//happens when you clicks on something

function upgrade(end, start, text, timerId){        

    var per = ( (new Date().getTime() / 1000) - start ) / ( end - start ) * 100;

    if(per>100)per=100;
    if(per<0)per = 0;
    text.innerHTML = Math.round(per)+'%';
timerId = setTimeout(function() { upgrade_bar(end, start, text, timerId) } , 17);
}

现在假设用户想要关闭此计时器。当 id 的范围仅限于函数时，我该如何执行 clearTimeout(timerId) ？

我有这样的例子:

document.getElementById("sbmt").addEventListener("click", remove_div, false);
//this happens during windows.onload

不知何故，我的函数remove_div必须清除它。但超时的 id 没有范围。

我可以选择哪些选项来清除超时？

Answer 1

有几种方法可以做到这一点。

首先，您可以从 upgrade 返回 timerId。您可以将该值存储在一个可由其他函数访问的变量中。

或者，您可以在父对象内创建一个变量(在您的例子中，它看起来像是 window)来存储 id。

例如:

function upgrade(end, start, text, timerId) {
    // do stuff
    return setTimeout(/*params*/);
}
var timerId = upgrade(/*params*/);

function remove_div(event) {
    // do stuff
    clearTimeout(this.timerId);
}

document.getElementById("sbmt").addEventListener("click", remove_div.bind({'timerId': timerId, 'element': document.getElementById("sbmt")}, false);

或者:

var timerId;
function upgrade(end, start, text) {
    // do stuff
    timerId = setTimeout(/*params*/);
}

function remove_div(event) { 
    // do stuff
    clearTimeout(timerId);
}

document.getElementById("sbmt").addEventListener("click", remove_div, false);