【发布时间】：2010-06-02 10:52:43
【问题描述】：
是否可以限制 setInterval 在 javascript 中触发的次数？
【问题讨论】：
标签： javascript
【发布时间】：2010-06-02 10:52:43
【问题描述】：
您可以在 x 调用后调用clearInterval()：
var x = 0;
var intervalID = setInterval(function () {
// Your logic here
if (++x === 5) {
window.clearInterval(intervalID);
}
}, 1000);
为避免使用全局变量，上述改进如下：
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
然后可以调用新的setInvervalX()函数如下：
// This will be repeated 5 times with 1 second intervals:
setIntervalX(function () {
// Your logic here
}, 1000, 5);
【讨论】：
-
嘿@DanielVassallo，说我只想清除第三次回调的间隔，因为也许它最终通过了一些逻辑；会从 setIntervalX() 返回 false 突破，还是需要在某个地方添加一个额外的参数？看起来如果我从回调（）返回一个布尔值，我就可以跳出区间..
-
非常感谢您提供有用的 sn-p @DanielVassallo
-
@BenSewards 您在哪里可以从回调中返回一个布尔值以跳出区间？您可以将
clearInterval多次放入您的回调中，并让它响应您喜欢的任何逻辑。无需返回 bool 即可获得相同的结果。 -
有三个答案使用 setTimeout 清除区间，只有两个在区间自己的回调中清除区间。为什么这种方式更好？
-
@KyleDelaney 我无法判断答案的技术质量，我只知道它是完整的。对于新手，答案提供了功能以及如何使用该功能的示例。以这种方式，所有其他答案都是不完整的，并且对于新程序员来说更难使用。
我个人更喜欢用setTimeout()隔开来达到同样的效果
// Set a function to run every "interval" seconds a total of "x" times
var x = 10;
var interval = 1000;
for (var i = 0; i < x; i++) {
setTimeout(function () {
// Do Something
}, i * interval)
}
clearInterval() 不需要清理
你可以把它括起来以避免变量泄漏，它看起来很干净:)
// Definition
function setIntervalLimited(callback, interval, x) {
for (var i = 0; i < x; i++) {
setTimeout(callback, i * interval);
}
}
// Usage
setIntervalLimited(function() {
console.log('hit'); // => hit...hit...etc (every second, stops after 10)
}, 1000, 10)
【讨论】：
您可以使用 setTimeout 和 for 循环。
var numberOfTimes = 20;
delay = 1000;
for (let i = 0; i < numberOfTimes; i++) {
setTimeout( doSomething, delay * i);
}
【讨论】：
-
@ProFan 这个“建议”听起来很武断，从来没有人说过这样的话
您可以设置调用clearInterval 的超时。
这应该有效：
function setTimedInterval(callback, delay, timeout){
var id=window.setInterval(callback, delay);
window.setTimeout(function(){
window.clearInterval(id);
}, timeout);
}
【讨论】：
-
哇，13 秒后我的答案几乎是相同。怪异的。
-
@T.J.有时我发现相反的情况更奇怪：当我们为一个小问题发布许多不同的解决方案时！
-
@T.J. Crowder：奇怪你使用局部变量和匿名函数；）
-
@T.J.Crowder 没什么，我可以在不到 7 秒的时间内克隆答案 :)
-
这不考虑 X。如果回调执行时间 > 延迟，那么它不会被触发 X 次，有些是在之后。示例： setTimedInterval(callback, 100, 1000);如果回调执行>1 00ms，那么它可能会被触发几次而不是10次。
这将在 10 次调用后清除间隔
<html>
<body>
<input type="text" id="clock" />
<script language=javascript>
var numOfCalls = 0;
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
numOfCalls++;
if(numOfCalls == 10)
window.clearInterval(int);
}
</script>
</form>
</body>
</html>
【讨论】：
我为 NodeJS 做了一个小包。
https://www.npmjs.com/package/count-interval
它是 setInterval 的替代品（包括参数传递），但它需要一个额外的 count 参数。此示例每秒打印一次消息，但仅打印 3 次。
const countInterval = require('./countInterval');
const timer = countInterval(() => {
console.log('fired!', new Date());
}, 1000, 3);
【讨论】：
对于那些更喜欢 setTimeout 和喜欢递归的人，我的建议是 ;)
const setIntervalX = (fn, delay, times) => {
if(!times) return
setTimeout(() => {
fn()
setIntervalX(fn, delay, times-1)
}, delay)
}
然后按照建议您可以调用新的setInvervalX() 函数，如下所示：
// This will be repeated every for 5 times with 1 second intervals:
setIntervalX(function () {
// Your logic here
}, 1000, 5);
【讨论】：
您实际上可以非常简单地使用setTimeout() 和incremental 计数器。
var i = 0; // counter for the timer
function doSomething() {
console.log("1 second"); // your actual code here, alternatively call an other function here
if (++i < 10)
{ // only reset the timer when maximum of 10 times it is fired
console.log("reset the timer");
setTimeout(doSomething, 1000); // reset the timer
}
}
setTimeout(doSomething, 1000); // init the first
此答案基于SO: Repeating setTimeout 以及与this 的漂亮、整洁和整洁的小组合。
【讨论】：
你可以使用六
SetIntervalX：限制 setInterval 触发的次数
存储库：https://github.com/UltiRequiem/six
它包括文档、100% 的代码覆盖率和示例！
适用于 Deno、Node.js 和浏览器！
【讨论】：