I encountered an issue with a button click event triggering an ajax call in my code. To ensure that the ajax call is synchronous, I set async:false. In order to provide user feedback during the call, I included the following code snippet:
$('#ajaxBtn').on("click",function() {
$('#ajaxBtn').html("processing ...");
$.ajax({
type: "Get",
url: "example.php?data=test",
async: false,
success: function(){
alert("success");
},
error: function(){
alert("failure");
}
})
}
Interestingly, when testing on Chrome (not tested on other browsers), upon clicking the button, the browser freezes until the completion of the ajax call. However, the text on the button doesn't update until after the success alert is shown. When debugging and stepping through the code, the behavior is as expected - the text changes before the ajax call begins.
Upon setting Async: true, the functionality seems to work correctly. The text updates instantly and then proceeds to the success function.
This leads me to question whether Chrome is reordering the ajax call to execute before updating the text on the button. Can anyone shed some light on this behavior?