perform function after x number of calls with setInterval

Question

In this article, the following function is given to perform an operation x times with setInterval()

setIntervalX(function () {
    animateColor();
    //or something
}, 3000, 4);

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

        callback();

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

what does the callback() do here? I'm trying to do a function after the specified number of repetitions is complete. but this

setIntervalX(function () {
    animateColor();
}, 3000, 4, function(){

completeFunction();

});

does not work. Perhaps that syntax is very wrong. I was under the impression that using jquery, you could string together functions like that..

Much grateful for any insight. Thanks!

Tobias Krogh · Answer 1 · 2012-04-20T18:10:44.063

4

I think you misunderstood the description slightly. The setIntervalX performs an interaction x times while you want to have a callback function AFTER the iteration.

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

        iterationFunction();

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

setIntervalX(
  function() {
    // this executed every time the interval triggers
  },
  1000, // amount of milliseconds to delay before interval triggers
  5, // amount of repetitions before interval is stopped and callback is executed
  function() {
    // this will be executed after the interval triggered 5 times
    // so after round about 5 seconds after setIntervalX was started
  }
);

edited Apr 20 '12 at 18:10

answered Apr 20 '12 at 17:36

Tobias Krogh

3,768
20
14

so when the author says this " // This will be repeated every for 5 times with 1 second intervals: setIntervalX(function () { // Your logic here }, 1000, 5); " the your logic here portion doesn't refer to the function i want to repeat. It does work this way though...even if i've done it wrong. Can you show me an example of how to call it your way, with the callback when it's finished the repititions? Thanks! – 1252748 Apr 20 '12 at 17:44
I edited my code example and added an example how to call it with some explaining comments – Tobias Krogh Apr 20 '12 at 18:11

score 2 · Accepted Answer · answered Apr 20 '12 at 17:44

2

function setIntervalX(func, delay, times, callback) {
    if (times > 0) {
        setTimeout(function() {
            func.apply(arguments.callee);
            setIntervalX(func, delay, --times, callback);
        }, delay);
    } else {
        callback.apply(this);
    }
}

setIntervalX(function() {
    document.write('ping!<br />');
}, 1000, 5, function() {
    document.write('Finished!<br />');
});

I personally prefer the setTimeout method... but that is just me. give this a shot and see if it works. demo

Ahh it appears I have misread you're entire post... so Tobias is correct in his reasoning for your question. mine is an example of what you want.

answered Apr 20 '12 at 17:44

rlemon

17,518
14
92
123

Noice! Thanks! Can you show me an example of you use setTimeout? And tell me why you prefer it. I'm open to doing it a different way if it's better in some way. Thanks again! – 1252748 Apr 20 '12 at 17:56
setTimeout just runs the function once after the determined period. setInterval has latency issues. The largest discrepancy you'll see here is the amount of code being executed between each iteration. http://jsfiddle.net/rlemon/Zf7GP/ – rlemon Apr 20 '12 at 18:01
So how could you use setTimeout in this situation? – 1252748 Apr 20 '12 at 18:03

score 0 · Answer 3 · answered Apr 20 '12 at 17:47

0

Wow, much simpler with Frame.js:

for(var i=0; i<4; i++){
    Frame(3000, animateColor);  
}
Frame(completeFunction);
Frame.start();

Both functions would need to call a callback which is passed to them as the first argument:

function animateColor(callback){
    // do stuff
    callback(); // to advance to the next interval
}
function completeFunction(callback){
    // do stuff
    callback(); // to advance to conclude the series of Frames
}

answered Apr 20 '12 at 17:47

BishopZ

6,269
8
45
58

I appreciate this, but it seems like loading an entire new library for just this little function is a bit excessive. But Frame seems cool! Thanks! – 1252748 Apr 20 '12 at 17:55
totally & thanks for the comment. your right, Frame is designed for longer sequences than this. The more complex your animation gets, the more complex the callbacks get. Flow control libraries like async and Frame help sort out problems like this, and at 10k can often be included inline without much impact to the project. – BishopZ Apr 20 '12 at 18:05

score 0 · Answer 4 · answered Apr 20 '12 at 18:09

callback in the original function is ran on every interval up to X times. Try this modification to allow for a complete callback:

setIntervalX(function () {
    animateColor();
    //or something
}, 3000, 4, function(){
    alert("all done!");
});

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

        callback();

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

perform function after x number of calls with setInterval

4 Answers4