Question

I have the strangest Bug, my Javascript function behaves differently depending on wether or not an alert is set on a specific Line.

Basically the Code looks like this:

var friendsHtml = 'Error String';
$.get("url", function(xml){
    $(xml).find('friend').each(function(){
        friendsHtml = 'html stuff';
    });
});
var div = '<div>'+friendsHtml+'</div>';
$("#friends_window").html(div);

Which will always display the Error String and not the HTML String.
But when i add an empty alert on this line, everything works just fine:

var friendsHtml = 'Error String';
$.get("url", function(xml){
    $(xml).find('friend').each(function(){
        friendsHtml = 'html stuff';
    });
});
alert("");
var div = '<div>'+friendsHtml+'</div>';
$("#friends_window").html(div);

I really don’t get it.

Answer 1

The alert blocks (“pauses”) the execution of the function, but not the AJAX request.

So, when you hit “OK” to dismiss the alert dialog, the request may have finished, and the friendsHtml variable is then changed by the callback method in jQuery.get.

A visualisation:

// Case 1
var friendsHtml = 'Error String';
< sending AJAX request... >
var div = '<div>'+friendsHtml+'</div>';  // <AJAX request hasn't finished yet
                                         // so "Error String" is printed.
// Case 2:
...
< sending AJAX request >
alert("");                           // <-- Blocks execution
                                     // Meanwhile, AJAX request finishes
                                     // and changes friendsHtml to "html stuff"
< User dismisses dialog, and the execution is resumed >
var div = '<div>'+friendsHtml+'</div>'; // <-- "html stuff"