Understanding Threading in javascript

Question

I have two div's in my html page

<div id="box1">
</div>

<div id="box2">
</div>

Both of them are absolutely positioned at different positions.

#box1,#box2 {
    height: 100px;
    width: 100px;
    background-color: red;
    position: absolute;
}

#box2 {
    top :200px;
}

In my Javascript I am animating these two div's as shown below

$(document).ready(function() {

    function animateBoxes() {
        $("#box1").animate({left : "500px"},5000);
        $("#box2").animate({left : "500px"},3000);
    }

    animateBoxes();
});

When my page loads both the div's start moving at the same time.

My question is if javascript is single threaded how can both the div's move at the same time. Because the movement of the div's is handled by javascript by two animate functions, one on box1 and other on box2.

How both the animate functions got executed at the same time?

I jumps between tasks so fast it makes it feel like it doing more then one thing at a time. But it does not. — Ronni Skansing, May 11 '14 at 06:27
You may find your answer here http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded — Kingisback, May 11 '14 at 06:32
You should look at the difference between "concurrency" and "parallelism": https://stackoverflow.com/questions/1050222/concurrency-vs-parallelism-what-is-the-difference The animations run concurrently, but not in parallel. — Chris Martin, May 11 '14 at 06:48

Muhammad Umer · Accepted Answer · 2014-05-11T17:21:43.453

Javascript is single threaded meaning something if is stuck the whole script is stuck...and only way overcome this is spawn worker. To answer your question, Do You Know how animate function of jquery works...it sets timer to call function that updates div's position. So both div get positioned a little bit toward their goal. Timer is provided by javascript and is handled like an event. Javascript has event loop..which is reiterated by browser. Meaning as soon as js is done browser goes through all events and check if they have been fired and then run the function that is associated with them. Here animate function associate itself to timer event and gradually updates div's position, thus looking like it animated. And since it happens in steps the whole js doesn't have to wait for this animation to end to continue executing.

This is how events basically work in js:

browser starts executing the code..
every next action waits till last action is done.
when javascript reaches the code that is attaching function to event, js registers the event, let's say click event. Now it know that button has click event and it has this function.
Now after all code below has been executed browser starts new routine. To check for any event that have been fired.
...looping but no events..
you click button ...it adds that click event has fired to event loop check list.
browser again checks the event loop...it sees the event.
it runs the code for that event and clear it...
suppose you clicked two times...then the code of second event won't start executing till the first is done.
Timer is same but it fires every x amount of time has passed. But as you can see event loops gets stucked executing the function related to the event...the timer is not perfect.
let's say you set timer for 10 ms. And as 9ms had passed you clicked the button starting another event. So your button event starts executing..but it did something really long that took 5 ms.
so your timer actually fires at 14ms.

Take a look at this example: http://jsfiddle.net/82zLC/6/

This will give you idea that animation is divided into chunks which are update step by step...try changing t to 60.

score 1 · Answer 2 · answered May 11 '14 at 06:28

1

JavaScript can act asynchronous in many situations. .animate() is an example of this. It pretty much has to act asynchronous, in order to not interrupt other page processes. If you are looking for the events to happen one-after-the-other, try looking into callbacks:

$("#box1").animate({left: "500px"},5000, function(){
    $("#box2").animate({left: "500px"},5000);
});

When we pass the function to .animate(), it calls the function after it is done with the animation.

answered May 11 '14 at 06:28

EpicDavi

6,732
3
19
20

2

you meant it can act like 'asynchronous'. But in actuality this is bad way to understand js. see what i said. – Muhammad Umer May 11 '14 at 06:29
1

it's ok...i had a hard time understanding this but then i found this very good tutorial which really explained it to me...this eventually helped completely understand nodejs as well. Don't ask for the link i can't find it :D – Muhammad Umer May 11 '14 at 06:42

Understanding Threading in javascript

2 Answers2