在 Javascript 的 for 循环中重置同一计时器的超时

Question

由于问题的简单性，我想这可能是重复的，但我找不到任何答案。

如果某个条件为真，我将在 foor 循环中设置一个超时函数。因为我不想在循环内声明超时，所以我编写了一个 setTimeout 函数将其设置在外部。我想只用一个定时器，如果已经是运行就重置，否则应该第一次设置定时器。我的问题是，尽管我使用的是 clearTimeout()，但该函数设置了多个计时器。

我的代码：

    var timeout_id;
    var things = [true, true, false, true, true];

    var setTimer = function(timer_id, duration) {
        console.log("timer_id: ", timer_id);
        // clear timeout of the given Id
        clearTimeout(timer_id);
        timer_id = setTimeout(function() {
            // reset flag
            console.log("Timer timed out");
        }, duration);
        console.log("timer_id: ", timer_id);
    };

    for (var i = things.length - 1; i >= 0; i--) {
        if (things[i]) {
            setTimer(timeout_id, 900);
            console.log("Timer set because value of : " + i + " = ", things[i]);
        }
    }

我在控制台得到的是：

timer_id:  undefined
timer_id:  1
Timer set because value of : 4 =  true
timer_id:  undefined
timer_id:  2
Timer set because value of : 3 =  true
timer_id:  undefined
timer_id:  3
Timer set because value of : 1 =  true
timer_id:  undefined
timer_id:  4
Timer set because value of : 0 =  true
timer timed out
timer timed out
timer timed out
timer timed out

不明白为什么我的timer_id每次都增加

我正在传递 id 并重置它的计时器。之后我在同一个 Id 上设置一个计时器，不是吗？是否未给出对 var timeout_id 的引用并从 setTimer 函数内部更改它？

感谢您的帮助。

Answer 1

好吧，我很快就找到了解决方案。通过在 timeout_id 变量上返回 timeout_id 和运行函数，我只得到一个计时器运行ning:

    var timeout_id;
    var things = [true, true, false, true, true];

    var setTimer = function(timer_id, duration) {
        console.log("timer_id: ", timer_id);
        // clear timeout of the given Id
        clearTimeout(timer_id);
        timer_id = setTimeout(function() {
            // reset flag
            console.log("Timer timed out");
        }, duration);
        console.log("timer_id: ", timer_id);
        return timer_id;
    };

    for (var i = things.length - 1; i >= 0; i--) {
        if (things[i]) {
            timeout_id = setTimer(timeout_id, 900);
            console.log("Timer set because value of : " + i + " = ", things[i]);
        }
    }

其中登出：

timer_id:  undefined
timer_id:  1
Timer set because value of : 4 =  true
timer_id:  1
timer_id:  2
Timer set because value of : 3 =  true
timer_id:  2
timer_id:  3
Timer set because value of : 1 =  true
timer_id:  3
timer_id:  4
Timer set because value of : 0 =  true
Timer timed out

你看。只有一个计时器在 900 毫秒后完成。

Answer 2

将您的 setTimer 函数更改为：

var timer_ids = {};

var setTimer = function(timer_id, duration) {
    console.log("timer_id: ", timer_id);
    // clear timeout of the given Id
    clearTimeout(timer_ids[timer_id]);
    timer_ids[timer_id]= setTimeout(function() {
        // reset flag
        console.log("Timer timed out");
    }, duration);
    console.log("timer_id: ", timer_id);
};

Answer 3

问题：

I don't understand why my timer_id is increased every time.

I am passing the id and reset the timer of it. After that I am setting a timer on the same Id, ain't I?

Is the reference to the var timeout_id not given and changes it from inside the setTimer function?

答案：

发生这种情况的原因是您正在传递 primitive 数字类型变量。

原始类型变量作为值而不是引用传递。

所以在这一行...

setTimer(timeout_id, 900);

...每次都传递 undefined 的值（不是对 timeout_id 的引用）

并在这一行中...

timer_id = setTimeout(function() {

... timer_id 没有像您预期的那样持有对 timeout_id 的引用。

那么您的 setTimer() 函数中发生了什么：

第一个 console.log 输出 undefined 因为这是作为参数传递的内容。

第二个 console.log 每次输出递增的 id，因为这是 setTimeout() 函数 returns 每次调用。

setTimeOut() returns 递增的唯一整数 ID 的原因是您可以将该 ID 粘贴在变量中，因此您可以在将来使用它来清除超时 clearTimeout( id )

Here is a nice explanation of 'Passing by Value or by Reference'

在 Javascript 的 for 循环中重置同一计时器的超时

Reset Timeout of the same timer in a for loop in Javascript

javascript

loops

for-loop

settimeout

cleartimeout