Javascript: Excuting 2 functions in desired interval

Question

I'm quite new to javascript and I'm trying to learn time events. I'm trying to implement a function which takes a number and execute function1 for that number of times, then execute function2. But between each execution, I'd like to have a set interval. E.g., function1 prints "foo" and function2 prints "bar". If the function's input number is "3" & interval is 5 seconds, the final printing should be foo,foo,foo,bar,foo,foo,foo,bar .... with each 5 seconds apart. I've tried for loop and while loop.

var i=0;
while (i < 4){//number of times to repeat "function"
    if (i%4 == 0){
        setInterval(function(){
            console.log("bar");
        },2000);//interval between functions
    }
    else{
        setInterval(function(){
            console.log("foo");
        },2000);//interval
    }
    i++;
    if (i==4) i = 0;
}

Answer 1

function fooBar(foo,delay){
    var i=1;
    setInterval(function(){
        if (i%(foo+1) ==0){
            console.log("BAR");
        }
        else {
            console.log("foo");
        }
        i++;
        //set i back to 0. not necessary, though
        if (i==(foo+1)){
            i=0;
        } 
    },delay);
}
fooBar(3,1000);//number of "foo"s , delay in ms

Answer 2

Instead of setinterval to two function, setinterval to one function that call two function conditionally.

Answer 3

There are multiple things you missed.

1. setInterval "sets" an asynchronous task to be executed some time in the future (2000ms in your code). After the call is made, execution immediately continues to the next line. Also, you should use setTimeout if you want your task to only run once. setInterval causes the task to be executed in an endless "loop" (At least untill clearInterval is called).
2. Your while condition is redundant. I will never be equal to or higher then 4 since you reset it inside the while block (in the last if). That seems intentional, but then there is no reason to have a condition at all (use while(true))

A solution to do what you wanted could be:

var maxPrints = 20; // Otherwise this will never end...

function nextInterval(i) {
  console.log(i == 0 ? 'bar' : 'foo');
  if(--maxPrints > 0)
    setTimeout(function() { nextInterval((i + 1) % 4); }, 2000);
}
nextInterval(0);

Or you could do it with a single call to setInterval like this:

var maxPrints = 20; // Otherwise this will never end...
var i = 0, interval;

function nextInterval() {
  console.log((i++ % 4) == 0 ? 'bar' : 'foo');
  if(--maxPrints <= 0)
    clearInterval(interval);
}
interval = setInterval(nextInterval, 2000);

Answer 4

Try

var i = 0,
  num = 3,
  interval = setInterval(function() {
    if (i < num) {
      console.log('foo')
    } else {
      console.log('bar')
    }

    if (i++ == num) {
      i = 0;
    }
  }, 500);

Answer 5

The way I would approach this is by making a run list of functions to call in order:

function loopFunctions(functions, delay)
{
    var i = 0;

    return setInterval(function() {
        // call current function
        functions[i]();
        // advance pointer and loop if necessary
        i = (i + 1) % functions.length;
    }, delay);
}

var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };

loopFunctions([foo, foo, foo, bar], 2000);

It's relatively easy to populate that array:

var fns = Array.apply(null, new Array(3)).map(function() { 
    return foo; 
}).concat([bar]);