Issue with Javascript (call asynchronously)

Question

I'm trying change text before I get feeds.
But the text changes after I got the feeds.
The question/answer it's only for Google Chrome (because it's an extension)
Sorry for my poor english ;-)

$("h1").click(function(){
 $(this).text("Loading..."); // this happen after fids();
 fids(); // function to get feeds
});

Answer 1

It would be better to change fids to work asynchronously, but if you can't do that, you can run fids in a timeout:

$("h1").click(function(){
 $(this).text("Loading...");
 setTimeout(fids, 0);
});

Try it on JSFiddle.

The reason it doesn't work the way you had it is that in all common browsers, JavaScript runs on the UI thread. If you change the text and then call a blocking function, the browser waits for the JavaScript to finish running before it updates the UI. Using setTimeout makes it run on the next event loop, after the browser has had time to redraw the text.

• user166390: Right .. but why does it act like so?
• Michäel: It works. Thank you. But I have the same problem if after this function I want write $("h2").show(); for exemple. Any suggestion?
• icktoofay: @Michäel: I'm not sure I understand your problem. I've got an example of something with $("h2").show(); working here.
• Michäel: For exemple. After setTimeout(fids, 0); I write $(this).hide(); $("h2").show(); [this happen before I got the feeds too]
• Michäel: h2 is hidden from css (display:none). Only when I got the feeds I want h2 being visible