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

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

• javascript
• ajax
• asynchronous
• callback

• @Ionut: I actually thought the original question title was better. The phrase "order of evaluation" is a little misleading. – William Brendel Commented Jul 31, 2009 at 14:35
• @William, probably. You may edit it of course, after all you gave the most appropriate answer. That's the best I could came up with though. – Ionuț G. Stan Commented Jul 31, 2009 at 14:43
• thanks .. did not know what to call it actually. :) – Emre Commented Jul 31, 2009 at 15:50

6 Answers 6

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.

Callbacks are used in javascript, and any language for that matter to tell a piece of code what to do when a given event occurs. It helps prevent coupling all of your code into one big mess.

See the wikipedia entry.

Callback functions are usually associated with asynchronous events - and jQuery.load is a good example.

When you call such a function, the result of calling it is not immediately available, even though control can be returned to the calling code almost straight away. The purpose of supplying a callback function is to say - 'Go and do this operation and, when you've finished, run this piece of code to process the results. In the meantime, I'll be away doing something else'

Does this make sense?

Some functions have callbacks because they are asynchronous.

Scenario. In javascript you want to get the content from another html page. You call that page but the server is super slow. Do you want the javascript method call to hang at that point, preventing further execution? Answer, no. That's not a very nice thing to do to the user.

Enter asynchronous method calling. When you call page x, instead of waiting for that to return, the script just moves on. This keeps the users browser from locking up. However, a callback method is given so that when the data does actually e back, it can be acted upon. This allows the page to not be blocked by potentially long operations.

Make sense?

In theory, it's not guaranteed at all that the javascript statements will be executed after the page is pletely loaded. A threaded browser may choose to execute the javascript whilst rendering the HTML.

Callbacks are a way to synchronize calls to javascript statements. They ensure the code is executed in a predefined order, after certain events (like 'the page is loaded pletely').

Callbacks are good because they prevent the browser from locking up and being unusable when working. It allows the browser to still be usable and then carry on working on the JavaScript when the previous thing is finished because it is handling the work asynchronously.

jQuery.load("some.html",thenrunthis);

If the thenrunthis wasn't there and the loading of some.html took a while the person couldnt use the browser until it was finished loading