Javascript - telling setInterval to only fire x amount of times?

Question

Is it possible to limit the amount of times that setInterval will fire in javascript?

score 215 · Accepted Answer · edited Oct 17 '19 at 22:09

215

You can call clearInterval() after x calls:

var x = 0;
var intervalID = setInterval(function () {

   // Your logic here

   if (++x === 5) {
       window.clearInterval(intervalID);
   }
}, 1000);

To avoid global variables, an improvement of the above would be:

function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

       callback();

       if (++x === repetitions) {
           window.clearInterval(intervalID);
       }
    }, delay);
}

Then you can call the new setInvervalX() function as follows:

// This will be repeated 5 times with 1 second intervals:
setIntervalX(function () {
    // Your logic here
}, 1000, 5);

edited Oct 17 '19 at 22:09

Bill Keller

723
5
21

answered Jun 02 '10 at 10:54

Daniel Vassallo

326,724
71
495
436

Hey @DanielVassallo, say i want to only clear the interval on the 3rd callback because maybe finally it passed some logic; will returning false break out of setIntervalX() or will an additional parameter somewhere be needed? It looks like if i return a bool from the callback(), i can then jump out of the interval.. – Ben Sewards Feb 24 '15 at 17:15
Thank you very much for the useful snippet @DanielVassallo – Ana DEV Sep 28 '16 at 13:29
@BenSewards Where does it look like you can return a bool from the callback to jump out of the interval? You can put `clearInterval` in your callback as many times as you like and have it respond to any logic you like. There's no need to return a bool to achieve that same result. – Kyle Delaney Aug 28 '18 at 19:01
There are three answers that use setTimeout to clear the interval and only two that clear the interval in the interval's own callback. Why is this way better? – Kyle Delaney Aug 28 '18 at 19:03
@KyleDelaney I can't judge the technical quality of the answer, I just know that it is complete. For a newbie, the answer provides the function and an example of how to use the function. All the other answers are incomplete in that way and harder to use for new programmers. – Sun Sep 07 '21 at 20:22
when calling this function I notice a significant delay in the stimuli I have drawn to my screen - does anyone know the source of this delay or any way to quantify it? – M.L. Sep 14 '21 at 16:06
This is really useful for what I'm doing. Thanks very much. ❤️ – NubSteel Dec 09 '21 at 10:03

score 8 · Answer 2 · answered Mar 08 '17 at 22:35

I personally prefer to use setTimeout() spaced out to achieve the same effect

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

There's no clean up required with clearInterval()

You can enclose it to avoid variables leaking and it looks pretty clean :)

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

score 5 · Answer 3 · answered Aug 03 '18 at 16:16

5

You can use setTimeout and a for loop.

var numberOfTimes = 20;
delay = 1000;

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

answered Aug 03 '18 at 16:16

Jerald Macachor

123
1
4

@ProFan this "advice" sounds very arbitrary, nobody ever said such a thing – Jivan May 02 '20 at 09:07

score 4 · Answer 4 · edited Jul 04 '19 at 07:39

4

You can set a timeout that calls clearInterval. This should work:

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

edited Jul 04 '19 at 07:39

Ben Grant

300
5
17

answered Jun 02 '10 at 10:57

blow

12,041
24
69
106

1

Wow, my answer 13 seconds later was virtualy *identical*. Freaky. – T.J. Crowder Jun 02 '10 at 10:58
1

@T.J. Sometimes I find the opposite more freaky: When we post many different solutions for one trivial problem! – Daniel Vassallo Jun 02 '10 at 11:05
@T.J. Crowder: Strange you using local variables and anonymous functions ;) – stagas Jun 02 '10 at 11:06
@T.J.Crowder thats nothing, I can clone an answer in less then 7 sec :) – Ilya Gazman Apr 04 '17 at 14:21
This doesn't take X into consideration. If the callback execution time > delay then it will not be fired X times, which some are after. Example: setTimedInterval(callback, 100, 1000); if callback execution is >1 00ms, then it will be probably fired a few times not 10 times. – klodoma Jul 18 '19 at 07:18

Amr Elgarhy · Answer 5 · 2010-06-02T11:19:45.507

1

This will clear the interval after 10 calls

<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>

edited Jun 02 '10 at 11:19

answered Jun 02 '10 at 10:58

Amr Elgarhy

63,002
67
183
299

score 1 · Answer 6 · answered May 03 '19 at 16:46

I made a small package that does this for NodeJS.

https://www.npmjs.com/package/count-interval

It's a drop-in replacement for setInterval (including parameter passing), but it takes an additional count parameter. This example prints a message once every second, but only 3 times.

const countInterval = require('./countInterval');

const timer = countInterval(() => {
   console.log('fired!', new Date());
}, 1000, 3);

score 1 · Answer 7 · answered Aug 25 '19 at 15:30

And for those of you preferring setTimeout and loving recursion here is my suggestion ;)

const setIntervalX = (fn, delay, times) => {
  if(!times) return

  setTimeout(() => {
    fn() 
    setIntervalX(fn, delay, times-1)
  }, delay)
}

Then as suggested you can call the new setInvervalX() function as follows:

// This will be repeated every for 5 times with 1 second intervals:
setIntervalX(function () {
    // Your logic here
}, 1000, 5);

score 1 · Answer 8 · answered Mar 18 '21 at 11:38

You can do this actually very simply with setTimeout() and an incremental counter.

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

This answer is based on SO: Repeating setTimeout and a nice, neat and tidy small combination with this.

score 0 · Answer 9 · answered Mar 30 '22 at 00:13

You canuse Six

SetIntervalX: Limit the number of times that setInterval will fire

Web Page: https://ulti.js.org/six

Repository: https://github.com/UltiRequiem/six

It includes documentation, 100% code coverage, and examples!

Works on Deno, Node.js and the browser!

Javascript - telling setInterval to only fire x amount of times?

9 Answers9

Linked

Related