如何重用setTimeout

时间:2014-07-17 17:29:19

标签: javascript timeout

我有一个setTimeout:

window.setTimeout(ground, 2000);

它工作正常,但我需要能够反复调用该超时并能够取消它所以我需要将代码更改为更像这样的代码:

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

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

window.clearTimeout(timeOut);

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

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

谢谢。

3 个答案:

答案 0 :(得分:3)

更新回答

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

  

但是我如何在另一个地方重新激活timeOut。

你不能;一旦取消,计时器句柄无效。但这没关系,只要确保能够做到这一点的任何事情都可以访问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();

原始回答

  

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

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

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

  2. 将它设置为对象上的两个代码共有的属性。

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

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

  5. #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;
            }
    
            // ...
        }
    
    })();
    

    附注:除非您在某个范围内覆盖setTimeoutclearTimeout,否则没有理由编写window.setTimeout而不仅仅setTimeoutwindow是引用全局对象的全局对象的属性。 setTimeout是引用该函数的全局对象的属性。所以window.setTimeout是不必要的间接的。如果您关注我,可能会window.window.setTimeout,甚至window.window.window.window.setTimeout。 :-)因此,如果你没有压倒那个全局,那么只需setTimeout即可。

    当然,如果你更喜欢它,那完全是你的呼唤。

    在图片中:

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

答案 1 :(得分:1)

如果您想随意重复使用相同的setTimeout调用,请使用以下函数:

var groundTimeout;

function startMyTimeout() {
  groundTimeout = window.setTimeout(ground, 2000);
}

function stopMyTimeout() {
  window.clearTimeout( groundTimeout );
}

然后,只要您想重用该特定的setTimeout调用,就可以简单地调用该函数。如果您想以预期模式重复调用,请尝试setInterval:

https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

答案 2 :(得分:0)

将timeOut声明为全局变量,而不是函数内的本地变量。然后您可以在任何功能中使用它。

这样的事情:

 <script type="text/javascript">

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

 function oneF(){
 }

 function twoF(){
 }
 </script>