Question

or ecmascript but i wonder if how it actually happens depends more on the exact implimentation.

javascript is technically single threaded.

but if i do something like

$myDIv.animate({
    height:"100px"
});

does it make any difference if i do

A.

$myDIv.animate({
    height:"100px"
}, null, my_cpu_heavy_function);

or B.

$myDIv.animate({
    height:"100px"
});
my_cpu_heavy_function();

because in the second one the animation would be fighting for processing time with the cpu heavy function and so the look of the animation would suffer, right?

So does Javascript stop executing at the end of a synchronous block of code or does it cut off one block at any random point to allow another block running asynchronously to be processed?

Answer 1

does it make any difference if i do A or B

Yes it will make a difference.

The second version doesn’t so much fight for processing time. It’s more like the my_cpu_heavy_function will occupy all processing time once it begins, assuming it is synchronous.

In other words, once a bit of synchronous code begins, it does not end until complete, irrespective of any timed asynchronous code that may be scheduled to run. The async code will always be forced to wait for the synchronous code to complete.

So what will happen will be that the animation will begin, and perform its initialization, but then the my_cpu_heavy_function will immediately start, and block the rest of the animation until it is complete.