关于javascript：第一次执行setInterval函数，请不要延迟

Execute the setInterval function without delay the first time

有一种方法可以配置javascript的setInterval方法以立即执行该方法，然后使用计时器执行

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

1 2	foo(); setInterval(foo, delay);

但是，有充分的理由避免使用setInterval-特别是在某些情况下，整个setInterval事件的负载可以立即彼此紧接而没有任何延迟地到达。另一个原因是，如果要停止循环，则必须显式调用clearInterval，这意味着您必须记住原始setInterval调用返回的句柄。

因此，另一种方法是让foo触发自己，以便使用setTimeout进行后续调用：

1
2
3
4
5
6
7
8
9
10

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

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

// start the cycle
foo();

这样可以确保两次调用之间至少间隔delay。如果需要，它也使取消循环变得更容易-达到循环终止条件时，您不必调用setTimeout。

更好的是，您可以将它们全部包装在立即调用的函数表达式中，该表达式创建函数，然后如上再次调用自身，并自动启动循环：

1
2
3
4

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

定义功能并一次性开始循环。

相关讨论

为什么您更喜欢setTimeout？
@Sangdol，因为它可以确保计时器事件在未经处理时不会"堆叠"。在某些情况下，setInterval事件的整个负载可以彼此紧接着立即到达，而没有任何延迟。
我喜欢您发布的最后一块代码。还有一点好用setTimeout();您可以确保在计划第二个周期之前就完成了上一个周期。
@JamesAndino因为它使用的是setTimeout而不是setInterval ...
应该有某种测试，让您在疲倦时不会在堆栈上发布
如果使用setTimeout方法，如何停止该功能？
@GauravBhor，您停止setInterval的方式相同，记住setTimeout返回的ID，然后调用clearTimeout(id)...或设置条件以运行或不运行函数中的下一个间隔。
在阅读您的答案之前，我有相同的想法，但无法实现。您立即调用的函数表达式已将其钉住！谢谢
由于您没有任何退出条件地进行递归调用，这是否会无限期消耗内存？
@DaveMunger不，因为它不是真正的递归-唯一的"伪递归"。在浏览器返回事件循环之前，不会发生"递归"调用，此时，调用堆栈已完全解开。
@Alnitak很酷，谢谢您的回答。哦，JavaScript，就在我终于明白你的时候... :)
延迟不是两个foo调用之间的确切时间间隔，而是延迟+ ...部分的运行时间。如果需要，使用setInterval更精确
@Alnitak我有以下显示通知代码：`$(document).ready(function(){$(＃show).load(job-notification.php，setInterval(function(){$(＃show).load( job-notification.php)}，10000，true));}); `如何将其与您端" foo"中的上述代码一起使用？
@MohammedKumel这样的东西：jsfiddle.net/k98fqcta
如果得到正确的(毫秒)秒，则可以使用Date.now()基于开始时间使用可变超时。
@chinoto我过去确实做到了
我正在使用setInterval ...但是在我的情况下，提到的"堆叠" @Alnitak才有效。这种类型的并发问题使得很难弄清到底发生了什么。使用的选项2。完美运行，谢谢。
@y？lmaz衡量进入函数和随后调用setTimeout以及相应地调整迭代延迟之间的时间延迟将是微不足道的。我过去确实做过这样的事情，以创建一个比仅使用setTimeout(tick, 1000)的时钟更精确的时钟。
该解决方案的潜在问题：如果您希望在计时器启动后停止计时器，则将无法执行。即超时将呼叫安排为5000毫秒，在1000毫秒内您决定要取消循环。结果是您告诉它停止后4000毫秒发生了一个动作。如果没有该超时的标识符，您将无法停止它-这意味着它也可能是一个间隔。有很多解决方法，但是到那时，您需要重新创建setInterval。除非您制作原子钟，否则请在设置迭代之前调用该函数。
@Polyducks可以轻松解决，例如在回调开始时if (!cancelled) { ... }。 setInterval在事件堆栈方面有其自身的问题(如上所述)。

我不确定我是否理解正确，但是您可以轻松地执行以下操作：

1
2
3
4

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

显然有许多方法可以做到这一点，但这是我能想到的最简洁的方法。

相关讨论

由于相同的问题，我偶然发现了这个问题，但是如果您需要表现得完全像setInterval()一样，那么所有答案都无济于事，唯一的区别是该函数在开始时立即被调用。

这是我对这个问题的解决方案：

1
2
3
4

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

该解决方案的优势：

使用setInterval的现有代码可以很容易地通过替换来适应
在严格模式下工作
它与现有的命名函数和闭包一起工作
您仍然可以使用返回值，然后将其传递给clearInterval()

例：

1
2
3
4
5
6
7
8
9

// 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。因此，在现有代码之前添加以下代码无需更改代码：

1
2
3
4
5
6

var setIntervalOrig = setInterval;

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

尽管如此，上面列出的所有优点仍适用于此，但无需替代。

相关讨论

您可以将setInterval()包装在提供该行为的函数中：

1
2
3
4

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

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

1
2
3

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

相关讨论

如果需要，这里有一个包装好的包装物：

1
2
3
4
5
6
7
8

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

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

将setInterval的第三个参数设置为true，它将在调用setInterval后立即首次运行：

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

或省略第三个参数，它将保留其原始行为：

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

一些浏览器支持setInterval的其他参数，该包装器没有考虑这些参数。我认为这些很少使用，但是如果您确实需要它们，请记住这一点。

相关讨论

对于某人，需要将外部this像箭头功能一样带入内部。

1
2
3
4

(function f() {
this.emit("...");
setTimeout(f.bind(this), 1000);
}).bind(this)();

如果以上产生的垃圾困扰您，则可以改为关闭。

1
2
3
4
5
6

(that => {
(function f() {
that.emit("...");
setTimeout(f, 1000);
})();
})(this);

或者也许考虑使用@autobind装饰器，具体取决于您的代码。

我建议按以下顺序调用函数

1 2	var _timer = setInterval(foo, delay, params); foo(params)

如果要在特定条件下clearInterval(_timer)，也可以将_timer传递给foo。

1 2	var _timer = setInterval(function() { foo(_timer, params) }, delay); foo(_timer, params);

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// YCombinator
function anonymous(fnc) {
return function() {
fnc.apply(fnc, arguments);
return fnc;
}
}

// Invoking the first time:
setInterval(anonymous(function() {
console.log("bar");
})(), 4000);

// Not invoking the first time:
setInterval(anonymous(function() {
console.log("foo");
}), 4000);
// Or simple:
setInterval(function() {
console.log("baz");
}, 4000);

相关讨论

对于新手来说，这是一个简单的版本，不会一团糟。它只是声明函数，调用它，然后开始间隔。而已。

1
2
3
4
5
6
7
8
9
10

//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 );

相关讨论

有一个方便的npm包，称为firstInterval(完整披露，这是我的)。

这里的许多示例都不包含参数处理，并且在任何大型项目中更改setInterval的默认行为都是很有害的。从文档：

这个图案

1 2	setInterval(callback, 1000, p1, p2); callback(p1, p2);

与...相同

1	firstInterval(callback, 1000, p1, p2);

如果您是浏览器的老手，并且不希望依赖，则可以轻松地从代码中剪切和粘贴。

为了解决这个问题，我在页面加载后第一次运行该函数。

1
2
3
4
5
6
7
8
9
10

function foo(){ ... }

window.onload = function() {
foo();
};

window.setInterval(function()
{
foo();
}, 5000);

立即调用函数存在问题，因为即使直接将setTimeout / setInterval设置为0，标准setTimeout / setInterval的最小超时也只有几毫秒左右。这是由浏览器特定的工作引起的。

真正延迟为零的代码示例可在Chrome，Safari，Opera中使用

1
2
3
4
5

function setZeroTimeout(callback) {
var channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage('');
}

您可以在这里找到更多信息

在第一次手动调用之后，您可以使用函数创建一个间隔。

实际上最快是

1	interval = setInterval(myFunction(),45000)

这将调用myfunction，然后每45秒执行一次agaian操作，这与实际操作不同

1	interval = setInterval(myfunction, 45000)

不会调用它，而只安排它

相关讨论