Javascript-告诉setInterval仅触发x次？

76

是否可以限制setInterval在javascript中触发的时间？

javascript

— Probocop
source

180

您可以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);

— 丹尼尔·瓦萨洛（Daniel Vassallo）
source

嘿@DanielVassallo，说我只想清除第三个回调的间隔，因为也许最终它传递了一些逻辑；会从setIntervalX（）返回错误的中断，还是需要在某个地方附加参数？它看起来像如果我从回调（）返回一个布尔值，然后我可以跳的间隔的了..

— 本Sewards

非常感谢您提供有用的摘要@DanielVassallo

— Anahit DEV

@BenSewards在哪里可以从回调中返回布尔值以跳出间隔？您可以clearInterval根据需要多次输入回调，并使它响应您喜欢的任何逻辑。无需返回布尔值即可达到相同的结果。

— 凯尔·德莱尼

有三个答案使用setTimeout清除间隔，而只有两个答案在间隔自己的回调中清除了间隔。为什么这样更好？

— 凯尔·德莱尼

4

您可以设置一个调用超时clearInterval。这应该工作：

function setTimedInterval(callback, delay, timeout){
    var id=window.setInterval(callback, delay);
    window.setTimeout(function(){
        window.clearInterval(id);
    }, timeout);
}

— 打击
source

哇，我13秒钟后的回答几乎是相同的。怪异的

— TJ Crowder 2010年

@TJ有时我发现相反的情况更怪异：当我们针对一个琐碎的问题发布许多不同的解决方案时！

— Daniel Vassallo 2010年

@TJ Crowder：使用局部变量和匿名函数使您感到奇怪;）

— stagas 2010年

@TJCrowder没什么，我可以在不到7秒的时间

— 内克隆

这没有考虑X。如果回调执行时间>延迟，那么它将不会触发X次，有些会在之后触发。示例：setTimedInterval（callback，100，1000）; 如果回调执行时间> 1 00ms，则可能会触发几次而不是触发10次。

— klodoma

3

我个人更喜欢使用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)

— NDavis
source

3

您可以使用setTimeout和for循环。

var numberOfTimes = 20;
delay = 1000;

for (let i = 0; i < numberOfTimes; i++) {
    setTimeout( doSomething, delay * i);
}

— 杰拉德·马卡乔
source

@ProFan这个“建议”听起来很武断，没有人说过这样的话

— Jivan，

1

这将清除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>

— 阿姆·埃尔加希（Amr Elgarhy）
source

1

对于那些更喜欢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);

— 乔纳斯·约翰逊
source

0

我制作了一个小包，用于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);

— 吉姆101
source