第一次没有延迟地执行setInterval函数

Question

它有一种方法可以配置setIntervaljavascript方法立即执行该方法,然后使用计时器执行

Answer 1

第一次直接调用函数是最简单的:

foo();
setInterval(foo, delay);

然而,有充分的理由要避免setInterval- 特别是在某些情况下,整个setInterval事件的负载可以在没有任何延迟的情况下立即到达.另一个原因是,如果你想要停止循环,你必须明确调用clearInterval,这意味着你必须记住从原始setInterval调用返回的句柄.

因此,另一种方法是使用foo触发器本身进行后续调用setTimeout:

function foo() {
   // do stuff
   // ...

   // and schedule a repeat
   setTimeout(foo, delay);
}

// start the cycle
foo();

这保证了呼叫之间至少存在间隔delay.如果需要,它还可以更容易地取消循环 - 只是setTimeout在达到循环终止条件时不会调用.

更好的是,您可以将所有内容包装在一个立即调用的函数表达式中,该表达式创建函数,然后再按上面的方式调用自身,并自动启动循环:

(function foo() {
    ...
    setTimeout(foo, delay);
})();

它定义了函数并一次性启动循环.

Answer 2

我不确定我是否正确理解你,但你可以很容易地做到这样的事情:

setInterval(function hello() {
  console.log('world');
  return hello;
}(), 5000);

显然有很多方法可以做到这一点,但这是我能想到的最简洁的方式.

Answer 3

由于同样的问题,我偶然发现了这个问题,但是如果你需要表现得非常相似,但没有任何答案会有所帮助,setInterval()但唯一的区别就是在开始时立即调用该函数.

以下是我对此问题的解决方案:

function setIntervalImmediately(func, interval) {
  func();
  return setInterval(func, interval);
}

这个解决方案的优点:

• 使用的现有代码setInterval可以通过替换轻松调整
• 在严格模式下工作
• 它适用于现有的命名函数和闭包
• 您仍然可以使用返回值并将其传递给clearInterval()以后

例:

// create 1 second interval with immediate execution
var myInterval = setIntervalImmediately( _ => {
        console.log('hello');
    }, 1000);

// clear interval after 4.5 seconds
setTimeout( _ => {
        clearInterval(myInterval);
    }, 4500);

要厚颜无耻,如果你真的需要使用setInterval那么你也可以替换原来的setInterval.因此,在现有代码之前添加此代码时,不需要更改代码:

var setIntervalOrig = setInterval;

setInterval = function(func, interval) {
    func();
    return setIntervalOrig(func, interval);
}

尽管如此,上面列出的所有优点都适用于此,但不需要替换.

Answer 4

您可以包装setInterval()一个提供该行为的函数:

function instantGratification( fn, delay ) {
    fn();
    setInterval( fn, delay );
}

...然后像这样使用它:

instantGratification( function() {
    console.log( 'invoked' );
}, 3000);

Answer 5

如果你需要的话,这里有一个非常好的包装:

(function() {
    var originalSetInterval = window.setInterval;

    window.setInterval = function(fn, delay, runImmediately) {
        if(runImmediately) fn();
        return originalSetInterval(fn, delay);
    };
})();

将setInterval的第三个参数设置为true,它将在调用setInterval后立即第一次运行:

setInterval(function() { console.log("hello world"); }, 5000, true);

或者省略第三个参数,它将保留其原始行为:

setInterval(function() { console.log("hello world"); }, 5000);

有些浏览器支持setInterval的其他参数,而这个参数不考虑这个包装器; 我认为这些很少使用,但如果你确实需要它们,请记住这一点.

Answer 6

这是一个适合新手的简单版本，无需任何混乱。它只是声明函数，调用它，然后开始间隔。就是这样。

//Declare your function here
function My_Function(){
  console.log("foo");
}    

//Call the function first
My_Function();

//Set the interval
var interval = window.setInterval( My_Function, 500 );