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
Callbacks are good because they prevent the browser from locking up and becoming 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
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 come back, it can be acted upon. This allows the page to not be blocked by potentially long operations.
Make sense?
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.
In theory, it's not guaranteed at all that the javascript statements will be executed after the page is completely 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 completely').