为什么在for循环完成之前触发回调？

Question

learner here...I have used the callback technique I've learned here to try to get my alert to fire after I have appended my HTML. No matter what I do, my alert fires first, then my my HTML is appended. Based on what I've read, this shouldn't be happening. What am I missing here? I'd like my HTML to paint completely (by appending) before the alert fires. I appreciate any insight you may have!

 $(document).ready(function() { let data = { d: { results: [{ Title: 'title1' }, { Title: 'title2' }] } }; createHTML(data, callback); }); /*NOTE: 'data' is the result of a ajax call which is not included here for brevity*/ function createHTML(data, callback) { var tabOneWrap = $('.tabOneWrap'); var arr = data.d.results; for (var i in arr) { var item = arr[i]; tabOneWrap.append( '<div class="requestWrap">' + item.Title + '</div>' ); } callback(); } function callback() { alert("aloha"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabOneWrap">content</div> 

Answer 1

Using alert() is a poor debugging tool. It stops anything else from happening including repainting the document. Logging things to a console (F12 in browser) is much better

I've added some logging inside the loop and in the callback and you can see the order is as you expect. All else is the same

 var data = {d:{results:[{Title:'Item 1'},{Title:'Item 2'}]}}; $(document).ready(function(){ createHTML(data,callback); }); /*NOTE: 'data' is the result of a ajax call which is not included here for brevity*/ function createHTML(data,callback){ var tabOneWrap = $('.tabOneWrap'); var arr = data.d.results; for(var i in arr){ console.log('Loop :: ',i) var item = arr[i]; tabOneWrap.append( '<div class="requestWrap">'+item.Title+'</div>' ); } console.log('Before callback') callback(); } function callback(){ console.log("aloha"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabOneWrap"></div> 

Answer 2

Really, there is no good answer to this, because it is how the browser/js runtime is built to operate. The quick and dirty solution is to wrap your callback in a setTimeout or, better yet, requestAnimationFrame:

// setTimeout(callback, 0);
requestAnimationFrame(callback);

This will ensure that the event loop can “wrap around,” do some painting, and then execute your callback.

As long as synchronous code is being executed, the other pieces of the runtime machinery will just be waiting their turn. It is not until an asynchronous operation happens (like a setTimeout or RAF), that the browser will say, “Ok, nothing else to do, let's paint the screen with any changes and have a look in the queue for any other JS that is ready for execution.”

Here is my favorite talk on the topic. It might be a little deep if you're new to the craft, but it will give you a leg up going forward if you pay close attention.

https://youtu.be/cCOL7MC4Pl0