有一种方法可以配置javascript的setInterval方法来立即执行该方法,然后与计时器一起执行
当前回答
由于同样的问题,我偶然发现了这个问题,但如果你需要完全像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);
}
尽管如此,上面列出的所有优点都适用于这里,但没有必要进行替换。
其他回答
这个例子建立在@Alnitak的回答上,但是使用await Promise在循环循环中进行更细粒度的控制。
比较的例子:
let stillGoing = true;
(function foo() {
console.log('The quick brown fox did its thing');
if (stillGoing) setTimeout(foo, 5000);
})();
foo();
在上面的例子中,我们调用foo(),然后它每5秒调用一次自己。
但是如果,在未来的某个时候,我们为了停止循环而将stillGoing设为false,即使在发出停止命令之后,我们仍然会得到一个额外的log行。这是因为在任何给定的时间,在我们将stillGoing设置为false之前,当前迭代将已经创建了一个超时来调用下一次迭代。
如果我们使用await Promise作为延迟机制,那么我们就有机会在调用下一次迭代之前停止循环:
let stillGoing = true;
(async function foo() {
console.log('The quick brown fox did its thing');
await new Promise(resolve => setTimeout(resolve, 5000));
if (stillGoing) foo();
})();
foo();
在第二个示例中,我们首先设置5000ms的延迟,之后检查stillGoing值并决定是否调用另一个递归是合适的。
如果我们在任意点将stillGoing设为false,在我们设置值之后就不会打印出额外的log行。
需要注意的是,这要求函数是异步的,对于给定的使用,这可能是也可能不是一个选项。
对于那些使用React的人,下面是我解决这个问题的方法:
const intervalRef = useRef(0);
useEffect(() => {
if (condition is true){
if (intervalRef.current === 0) {
callMyFunction();
}
const interval = setInterval(() => {
callMyFunction();
}, 5_000);
intervalRef.current = interval;
} else {
clearInterval(intervalRef.current);
}
}, [deps]);
/ / YCombinator 匿名函数(fnc) { 返回函数(){ fnc。应用(fnc参数); 返回fnc; } } //第一次调用: setInterval(匿名函数(){ console.log(“酒吧”); }) (), 4000); //不调用第一次: setInterval(匿名函数(){ console.log (" foo "); }), 4000); //或者简单: setInterval(函数(){ console.log(“巴兹”); }, 4000);
好吧,这太复杂了,让我说得简单点:
函数hello(status) { console.log(‘世界’,+ + status.count); 返回状态; } setInterval(hello, 5 * 1000, hello({count: 0}));
为了解决这个问题,我在页面加载后第一次运行这个函数。
function foo(){ ... }
window.onload = function() {
foo();
};
window.setInterval(function()
{
foo();
}, 5000);
如果你需要,这里有一个包装来美化它:
(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的附加参数,但这个包装器没有考虑到这些参数;我认为这些很少使用,但如果你确实需要它们,请记住这一点。