What the problem with the sequence of events in js?

Good time of day,
I would be grateful for advice or at least kick in what direction to look.

A long time playing the render elements on the Backbone code below
or here an example with the problem on jsbin
var MyView = Backbone.View.extend({
tagName:'p',
className:'List',
page:1,
 render: function(widget_collection) {
 while ( this.page < 15 ) {
this.createPage();
this.addToLogNumberPage(this.page);
this.page++;
}
 return this;
},
addToLogNumberPage:function(page){
console.log('add:'+page);
 $('.log').append('Page N'+page+'printed, ');
},
createPage:function(){
 var i = 0;
 while (i<100000000){ i++; }
this.$el.append('<span>'+this.page+'</span>')
}
})

var my_view = new MyView();

$('button').click(function(){
$('.progressBar').show();
$('.log').show();
$('body').append(my_view.render().el);
})


Can't understand why .progressBar and .log will be displayed after rendering all elements, although console.log('add:'+page); printed during execution...
DOM, like, hangs, displays all soon after render()
October 3rd 19 at 01:23
3 answers
October 3rd 19 at 01:25
Solution
You witness one of the optimizations in modern browsers.

http://jsbin.com/OBaMoqe/1 - the comments marked the gist, but again

when you need to do something fat, you will certainly need to make the case out of context execution (via setTimeout or webworkers preferable), otherwise the rest of the code and all the events for the redraw will be to wait for the end of this fat logic.

js is an asynchronous language. The whole point of language is that all the heavy computations can and should be conducted in parallel.
thank you , and I can throw an example from webworkers? It is very interesting topic (he has brake) - jeffry52 commented on October 3rd 19 at 01:28
parallel? Are you talking about? JS in browsers topotecan. - edgardo_Weber commented on October 3rd 19 at 01:31
October 3rd 19 at 01:27
Not sure, but may do manipulation of the DOM will be executed for the completion of all the click () function. If so, the behavior is very strange.
nothing strange in this behavior is not. Moreover, everything is exactly as it should be. - jeffry52 commented on October 3rd 19 at 01:30
October 3rd 19 at 01:29
And the time for perfecting the show() method what You have is the default?

Most likely You have a progressBar does not have time to appear - the animation block calculations. The DOM is not updated until the end of the computation.

Solved it's simple: either show progressBar immediately without animation or detained calculations on the animation time.
The problem is that these calculations are run during the course of the click event. The browser will wait until the end of processing all handlers, otherwise it is necessary to perform a transition or something else (e.preventDefault). Of course that this moment won't work out and reflow and repaint - jeffry52 commented on October 3rd 19 at 01:32
And? As it interferes to postpone the event by using setInterval or fix the animation? - edgardo_Weber commented on October 3rd 19 at 01:35

Find more questions by tags Asynchronous programmingJavaScriptBackbone.js