CODEWITHSUNDEEP
javascriptexecution
Fawkes5
Fawkes5

Reputation: 1021

Javascript order of execution in setInterval

Suppose i am running some code inside a setInterval. That is, a bunch of code is begin run every 33ms or so.

Inside this bunch of code is a function, lets call it the Overlord function, which executes other functions depending the values of some state variables.

The question is this:

Suppose Overlord executes function1. Suppse that function1 has not finished running after 33ms (or whatever the interval length is) . Then Overlord executes function2 while function1 is presumably still running. What happens?

Does function1 finish before javascript runs function2? Is there some sort of que built into javascript execution?

Thank you!

Upvotes: 2

Views: 1329

Answers (3)

LetterEh
LetterEh

Reputation: 26696

This is where setInterval can quickly become a REALLY BAD IDEA™ .

The problem is this:

If you call setInterval(lots_O_functions, 15); what's going to happen is that lots_O_functions is going to get called 15ms later, BUT if it takes, say 45ms to finish doing all of that work, it's not going to be interrupted, instead you're going to have two more lots_O_functions calls waiting to run as soon as your first one is done...

...assuming that those two ALSO take 45ms apiece, you now have 6 more lots_O_functions calls waiting in line...

Is that what you want to happen? I don't know. Personally, I'd say it's not, the majority of the time, and here's why:

JS runs on a single thread. In fact, pretty much EVERYTHING in the browser (clicks, repainting the elements on the page, even leaving the page and going somewhere else) are all tied to the same thread in the VAST majority of cases.

So clogging that thread up with overlapping calls to heavy functions is NOT GOOD™

Instead, why not have something like:

var big_state_machine = { /*...*/ },
    lots_O_work = function () {
        big_state_machine.currentState.jobs.forEach(/*...*/);
        /*....... do lots o' work ......*/
        var more_work_to_do = /* figure out if you need to rerun lots_O_work */;

        if (more_work_to_do) { setTimeout(lots_O_work, 20); }
    };


lots_O_work();

Now, it's going to do what it needs to do, and if it's got more to do afterwards, it's going to call setTimeout to queue itself a minimum of 20ms after that point.

setTimeout isn't like a sleep or a wait, it says: "Look 20ms into the future, to see how many people are already waiting to do things... ...starting there, put me in the next available spot in line".

The difference here is that you're getting that done 20ms after your first function is finished, which means at least 20ms for other things to happen (clicks, painting, AJAX, etc).

With setInterval, it's like setTimeout, but instead of queueing up in the next available spot after the fact, it sets itself in the queue, whether it's ready (or needed) or not.

You can go even further into breaking this up to keep it really responsive, but this would be a good start.

Upvotes: 2

jaredjbarnes
jaredjbarnes

Reputation: 46

Javascript is single threaded, so you are safe.... most of the time. The only way function2 will run before function1 is complete is if function1 has any asynchronous code with callbacks to finish like ajax calls or another setTimeout or setInterval. For example:

var setInterval(function(){

    //.. 
    function1();
    function2();

}, 33);

var globalVariable = 0;

var function1 = function(){
    console.log(globalVariable);

    setTimeout(function(){
        globalVariable+=2;
    }, 1000);
};
var function2 = function(){
    console.log(globalVariable);
};

The output for this program would be.

-->0

-->0

-->2

-->2

And you may have expected.

-->0

-->2

-->2

-->4

Upvotes: 1

user1726343
user1726343

Reputation:

Javascript is single threaded, so the second function will be queued, but cannot be executed until the first has finished executing. That said, if your function takes more than 33ms to execute, it might be a good idea to break it into small asynchronous chunks (in order to prevent locking up the interface).

Upvotes: 7

Related Questions