settimeout - JavaScript function and UI updates -

i have following function slides relatively positioned element 1000px off of now.

for (var = 0; < 1000; i++) {     $('.my-element').css(         'left',         parseint($('.my-element').css('left'), 10) + 1     ); } 

this not produces sliding effect. rather, end of execution, element moves abruptly 1000px right.

now, if wrap ui updates in settimeout below:

for (var = 0; < 1000; i++) {     settimeout(function () {         $('.my-element').css(             'left',             parseint($('.my-element').css('left'), 10) + 1         );     }, 0); } 

this produces visual effect of element sliding 1000px right.

now, according understaning , thread, why settimeout(fn, 0) useful?, ui updates queued in browser event queue in same way async callbacks queued settimeout callback.

so, in case first, basically, queue of 1000 ui updates made when loop executed.

and in case second, first, queue of 1000 settimeout callbacks created, on execution, creates queue of 1000 ui updates.

so, eventually, both cases create same queue of 1000 ui updates. why difference in visual result?

i must looking on important javascipt , browser rendering concept here. can enlighten me appreciated.

note: above examples purely understanding purpose , not attempt create js function slide dom element.

this best way think it. browser can 1 of 2 things. either runs javascript or renders webapge, cannot both.

this because javascript code 100% blocking, meaning never give control until browser has executed blocking code.

you first example contains blocking code browser never given opportunity render until element needs be.

your second example contains blocking code uses settimeout (delayed blocking code) queues bunch of blocking code executed later (after other blocking code has completed) @ browsers discretion (between rending , javascript running cycles).

so second example loop execute, queuing 1000 functions execute @ point in time close 0ms possible. blocking code has completed 1 or more settimeout may execute or browser may render, pretty random happens though. weave , forth between rendering , executing javascript.

take code example.

settimeout(function () { //this makes page loads , sits second     var delay = 100, //delay between animations         distance = 25, //total distance moved         sync = false; //should use blocking code      if (sync) {         var = 0,             elapsed = 0,             last = new date();         while (i < distance) {             var = new date();             elapsed += (now - last);             last = now;             if (elapsed >= delay) {                 move(i++);                 elapsed -= delay;             }         }     } else {         (var = 0; < distance; i++) {             assyncmove(i, delay * i);         }     }      function assyncmove(position, delay) {         settimeout(function () {             move(position);         }, delay);     }      function move(position) {         $("div").css("left", position);     } }, 1000); 

you can change delay, distance, , sync variables. both loops wait move element delay milliseconds between each animation. both move div total of distance pixels. 1 (settimeout) have visible animation while other shoot over. if make delay or distance long sync method freeze browser, assync solution not have issue!

http://jsfiddle.net/j79s4o4w/3/