JavaScript Frameworks – Why Duplicate Functions?

In general, any function that does networking or uses timers to do things over a period of time will be asynchronous.

If the function takes a callback, you can look at what the callback is used for and usually it will be obvious whether is is asynchronous or not. If the function does not offer a callback, then it has no way of communicating asynchronous results so it is probably not asynchronous.

There's no ironclad way to tell for sure. It has to either be spelled out in the doc for a function or obvious from the way the interface works.

Asynchronous operations are different under the covers than synchronous operations in that asynch operations have the notion of setting up an operation, starting the operation and then getting notified later of progress, completion or errors in the operation. Iterating an array is a synchronous operation. It has none of these issues. The code just runs synchronously. Issuing an ajax call consists of registering a callback for state notifications, then starting the ajax call, then continuing to run other javascript and then some time later, the callback is called with a state change on the ajax call (such as completion).

jQuery has an internal queue of all the handlers it has attached for a particular event on a particular element. The first time you bind an event to that element it initializes the queue and uses addEventListener to bind the event to jQuery's generic event-handling function. When the event is triggered, the function uses event.target to determine which element it is, and then finds the queue of handlers associated with it and calls them in the order that they were added.

The on method of delegation is nested on top of this. It takes advantage of event bubbling: when an event occurs, it's triggered on the specific target element and also all its containing elements. You bind the handler to a container, and it saves the selector string in the queue entry. When it's processing that entry in the handler queue, it tests whether event.target (which is still the specific element that you clicked on) matches the selector, and then executes the handler function. This mechanism allows you to bind handlers for elements that have not yet been added to the DOM; it's particularly useful when you have a list of elements that is updated dynamically (e.g. adding rows to a table).