How to run one statement after another in a procedural manner in Javascript?

Question

Lets say we have a simple scenario where I would like to repeatedly output "Hello" followed by "World" 1 second later. I have tried the following:

setInterval(
    function() {
        console.log("Hello");

        setTimeout(
            function() {
                console.log("World");
            },
            1000
        );
    },
    1000 
);

But it doesn't work, at the second interation of setInterval the console.log outputs Hello World at the same time.

What did I do wrong?

I think you should be using `setTimeout()`, not `setInterval()` — DevlshOne, Aug 11 '13 at 14:31
He's using both. Each event fired with `setInterval` also results in a one-time event fired with `setTimeout`. — Taymon, Aug 11 '13 at 14:32
What happens when you increase the setInterval time to 1100? At the moment, since both are 1000 it's not guaranteed which will happen first. — lance-java, Aug 11 '13 at 14:35

score 5 · Accepted Answer · answered Aug 11 '13 at 14:31

5

The outer interval should be 2 seconds.

answered Aug 11 '13 at 14:31

Nabil Kadimi

10,078
2
51
58

1

@chutsu, not this is not stupidity, maybe just lack of coffee )) – Nabil Kadimi Aug 11 '13 at 14:40

amd · Answer 2 · 2013-08-12T05:33:17.827

This is not a direct answer to your question but I think its useful in your situation,

I created a queue runner function that takes a list of functions to run after a period of time

Features:

You can add as many as you want functions to the queue
You can set if you want to run the queue once or to repeat the sequence
Using only the setInterval function and without the setTimeout

Definition:

var queue = function ( /* Array<function> */ fn, /* int */ timeout, /* boolean */ repeat) {
    return function () {
        var i = 0,
            f = fn[i],
            t = setInterval(function () {
                f();
                if (fn[i + 1] !== undefined) {
                    f = fn[++i];
                } else {
                    if (repeat) {
                        i = 0;
                        f = fn[i];
                    } else {
                        clearInterval(t);
                    }
                }
            }, timeout);
    }
}

And you call it like this :

var fn = [function(){console.log('A')}, function(){console.log('B')}];
queue(fn, 1000, true)();

JSFIDDLE:

you can check the jsfiddle Hope this help ☺

How to run one statement after another in a procedural manner in Javascript?

2 Answers2