javascript - 如何重用 setTimeout

Question

我有一个 setTimeout:

window.setTimeout(ground, 2000);

它工作得很好，但我需要能够重复调用该超时并能够取消它，所以我需要将代码更改为更像这样的内容:

var timeOut = window.setTimeout(ground, 2000);

然后我可以用这个取消它:

window.clearTimeout(timeOut);

我想在不同的地方重用 timeOut。 我该怎么做？

*ground 是在超时结束时起作用的函数的名称。

谢谢。

Answer 1

更新的答案

在你问过的其他地方的评论中:

But how would I reactivate the timeOut in a different place.

你不能；一旦取消，定时器句柄无效。但这没关系，只需确保需要能够执行此操作的任何东西都可以访问 ground 并且可以这样做:

timeOut = setTimeout(ground, 2000);

...再次。

或者，如果只有一个符号并重用逻辑，您可以将所有这些放在一个对象中:

var groundTimer = {
    handle: 0,
    start: function() {
        this.stop();
        this.handle = setTimeout(ground, 2000);
    },
    stop: function() {
        if (this.handle) {
            clearTimeout(this.handle);
            this.handle = 0;
        }
    }
};

然后在任何需要启动/重启它的地方:

groundTimer.start();

或停止它:

groundTimer.stop();

...通过确保任何需要 groundTimer 的代码都可以访问它(参见下面的原始答案)。

或者你可以概括它:

function Timer(func, delay) {
    this.handle = 0;
    this.func = func;
    this.delay = delay;
}
Timer.prototype.start = function(newDelay) {
    if (typeof newDelay !== "undefined") {
        this.delay = newDelay;
    }
    this.stop();
    this.handle = setTimeout(this.func, this.delay);
    return this;
};
Timer.prototype.stop = function(newDelay) {
    if (this.handle) {
        clearTimeout(this.handle);
        this.handle = 0;
    }
    return this;
};

用法:

var groundTimer = new Timer(ground, 2000);

然后在任何需要启动/重启它的地方:

groundTimer.start();

或停止它:

groundTimer.stop();

---

原始答案:

I would like to reuse timeOut at a different place. How would I do that?

这是一个变量。您可以像处理任何其他变量一样与其他需要它的代码共享它:

1. 将它作为参数传递给需要它的代码。

2. 将其设置为一个对象的属性，这两个代码位具有共同点。

3. 使两段代码都在声明变量的范围内关闭。

4. (#2 和/或#3 的特例，具体取决于您的 POV)使用全局变量 (blech)。

#3 的示例:

// Scoping function to avoid creating a global variable.
// I usually have one of these around all of my code.
(function() {
    var timeOut = 0; // 0 isn't a valid timer handle value, so I always initialize these with 0

    function yourFunctionThatSetsTheTimeout() {
        // ...

        timeOut = window.setTimeout(ground, 2000);

        // ...
    }

    function yourFunctionThatUsesTheTimerHandle() {
        // ...

        if (timeOut) {
            window.clearTimeout(timeOut);
            timeOut = 0;
        }

        // ...
    }

})();

---

旁注:除非您在某些范围内覆盖 setTimeout 和 clearTimeout，否则没有理由编写 window.setTimeout 而不仅仅是 设置超时。 window 是引用全局对象的全局对象的属性。 setTimeout 是引用函数的全局对象的属性。所以 window.setTimeout 是不必要的间接的。它可能是 window.window.setTimeout，甚至是 window.window.window.window.setTimeout，如果你跟着我。 :-) 因此，如果您不覆盖该全局变量，那么只需 setTimeout 即可。

当然，如果您为了清晰起见而更喜欢它，那完全是您的决定。

在图片中:

        +----------------+        |                |        v                |+-------------------+    || The Global Object |    |+-------------------+    ||    window         |----+           +----------------------+|    setTimeout     |--------------->| Function: setTimeout ||    clearTimeout   |---...          +----------------------+|    document       |---...|    ...            |+-------------------+