Javascript - 告诉 setInterval 只触发 x 次?

IT技术 javascript
2021-02-12 01:11:22

是否可以限制 setInterval 在 javascript 中触发的次数?

6个回答

您可以clearInterval()x 次调用调用:

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);
有三个答案使用 setTimeout 清除间隔,只有两个答案在间隔自己的回调中清除间隔。为什么这种方式更好?
2021-03-18 01:11:22
@KyleDelaney 我无法判断答案的技术质量,我只知道它是完整的。对于新手,答案提供了功能和如何使用该功能的示例。所有其他答案都以这种方式不完整,并且对于新程序员来说更难使用。
2021-03-18 01:11:22
@BenSewards 在哪里可以从回调中返回 bool 以跳出间隔?您可以clearInterval根据需要多次输入回调,并让它响应您喜欢的任何逻辑。无需返回 bool 即可实现相同的结果。
2021-03-23 01:11:22
嘿@DanielVassallo,说我只想清除第三次回调的间隔,因为也许最终它通过了一些逻辑;是否会从 setIntervalX() 返回 false 中断,或者是否需要某个地方的附加参数?看起来如果我从回调()返回一个布尔值,我就可以跳出间隔..
2021-03-29 01:11:22
非常感谢您提供有用的片段@DanielVassallo
2021-03-30 01:11:22

我个人更喜欢使用setTimeout()spaced out来达到同样的效果

// 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 这个“建议”听起来很武断,没有人说过这样的话
2021-03-25 01:11:22

您可以设置调用的超时时间clearInterval这应该有效:

function setTimedInterval(callback, delay, timeout){
    var id=window.setInterval(callback, delay);
    window.setTimeout(function(){
        window.clearInterval(id);
    }, timeout);
}
哇,我 13 秒后的回答几乎完全相同怪异的。
2021-03-17 01:11:22
@TJCrowder 那没什么,我可以在 7 秒内克隆一个答案:)
2021-03-26 01:11:22
这不考虑X。如果回调执行时间 > 延迟,那么它不会被触发 X 次,有些是在之后。示例: setTimedInterval(callback, 100, 1000); 如果回调执行 >1 00ms,那么它可能会被触发几次而不是 10 次。
2021-03-29 01:11:22
@TJ 有时我发现相反的情况更奇怪:当我们为一个微不足道的问题发布许多不同的解决方案时!
2021-04-01 01:11:22
@TJ Crowder:奇怪你使用局部变量和匿名函数;)
2021-04-08 01:11:22

这将在 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>