Order of evaluation in JavaScript code using Ajax?

Question

It seems (to me) like javascript statements do not always run one after another. I know they do that way but sometimes it seems like a show() func tion fires at the same time with hide() so the logic fails. There are callback functions to use, like jQuery.load("some.html",thenrunthis) ..

I need to understand the working logic. any help/leads?

thx in advance

Answer 1

You are really asking about the "A" in AJAX. It stands for asynchronous, and it allows you to make a request without blocking. The callback function will be executed if/when the request succeeds, but the rest of your code will continue to execute. One of the main advantages to this approach is UI responsiveness. A synchronous call will essentially freeze the browser until your request returns, which could take a while.

Edit: To expand a little on my original answer, I thought I'd point out that callback functions are not limited to AJAX requests. Since you seem to be using jQuery, you might want to look at the jQuery Events API for more examples using callbacks.

Example: Suppose you want to respond a certain way when a text input field gets focus. Here is an example straight from the jQuery documentation in which a callback function is used to respond to an input element obtains focus:

$("input").focus(function () {
     $(this).next("span").css('display','inline').fadeOut(1000);
});

That function is really a callback function. It will be called when the user selects an input element on the page. There is a working demonstration of the above code in action here.