运行 setTimeout 方法时 Javascript 堆栈溢出 +传递变量

Question

我知道我遇到的问题是什么，我只是很难找到解决方法。我想知道是否有人经历过类似的事情，以及他们实施了什么样的解决方案。

我有一个待修复的列表系统，并且我想要迟到的以黑色和红色闪烁的修复。此列表中可能有多个维修已晚。

这是我的函数：

function setblink(id) {
   var elm = document.getElementById(id);
    if (elm.color == "red"){
        elm.color = "black";
    }
    else{
        elm.color = "red";
    }
    setTimeout(setblink(id),500);
}

我有一个包含需要闪烁的项目的“id”数组，称为repsToBlink。

我通过运行以下代码来为每次修复运行设置的闪烁间隔，这将它们置于递归循环中。

for(var x in repsToBlink){
setTimeout(setblink(repsToBlink[x]),500);
}

我怎样才能让这段代码做同样的事情，而不导致堆栈溢出？

谢谢！

Answer 1

您需要将 setTimeout 从更改

setTimeout(setblink(id),500);

为：

setTimeout(function() { setblink(id) },500);

setTimeout() 期望将函数作为参数传递，而您正在传递函数的结果。

Answer 2

setblink(id) 立即调用该函数。堆栈溢出是立即执行而不是延迟执行的症状，因为 setTimeout 会安排稍后执行，因此将来的调用不会推送到当前调用堆栈上。

由于 setblink 需要一个参数，因此将其包装在 nullary 用于延迟评估的匿名函数。

function setblink(id) {
   var elm = document.getElementById(id);
    if (elm.color == "red"){
        elm.color = "black";
    }
    else{
        elm.color = "red";
    }
    setTimeout(function () {setblink(id)},500);
}

for (var x in repsToBlink){
    (function (id) {
        setTimeout(function () {setblink(id)},500);
    })(repsToBlink[x]);
}

该代码需要更多改进。

如果 repsToBlink 是一个数组，您应该循环遍历 repsToBlink< 的整数索引/code> (for (...;...;...))，而不是属性 (for ... in）。但是，如果您要使用带有 ids 和索引（而不是值）的对象，则 for ... in 会更合适。

上面的代码为每个id触发一个单独的计时器（这可能会压垮浏览器）。通过将循环移动到一个函数（该函数成为唯一要调度的函数），只需要一个计时器。

由于您定期运行一个函数，因此 setInterval 更合适。

每当您从 repsToBlink 中删除 id 时，请检查是否还有剩余；如果没有，则取消间隔。

(function () {
    var repsToBlink, repCount=0, blinkInterval;

    function startBlinking(ids) {
        addRepsToBlink(ids);
        if (! blinkInterval) {
            blinkInterval = setTimeout(blinkAll, 500);
        }
    }

    function addRepsToBlink(ids) {
        for (var i=0; i<ids.length; ++i) {
            addRep(ids[i]);
        }
    }

    function addRep(id) {
        if (! id in repsToBlink) {
            ++repCount;
            repsToBlink[ids[i]] = true;
        }
    }

    function removeRep(id) {
        if (id in repsToBlink) {
            delete repsToBlink[id];
            --repCount;
            if (!repCount) {
                clearInterval(blinkInterval);
                blinkInterval=0;
            }
        }
    }

    function blinkAll() {
        for (id in repsToBlink) {
            blink(id);
        }
    }

    function blink(id) {
        var elm = document.getElementById(id);
        if (elm.color == "red"){
            elm.color = "black";
        } else {
            elm.color = "red";
        }
    }

    window.startBlinking = startBlinking;
    window.addRepsToBlink = addRepsToBlink;
    window.addRep = addRep;
    window.removeRep = removeRep;
})();

Answer 3

您的问题是在全局上下文中调用 setTimeout 。这样，您就可以立即调用该函数。

解释器在到达以下代码时：

setTimeout(setblink(id),500);

立即调用 setblink 函数，假设该函数的返回值是超时应该调用。这会导致堆栈溢出，因为这是一个递归函数。

要解决此问题，请将 setTimeout 要调用的函数包装在 function(){} 内。