CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Razort4x
Razort4x

Reputation: 3416

how to execute jquery functions in a order?

As the title says, how can I maintain/control the order of execution of functions in Jquery? I know we can establish many event handler via addEventListener, but the order of their execution isn't guaranteed. Let me quote

Note that even though the handlers fire in the order in which they were established, this order isn’t guaranteed by the standard! Testers of this code never observed an order other than the order of establishment, but it would be foolish to write code that relies on this order. Always be aware that multiple handlers established on an element may fire in random order.

Manning Jquery in Action 2nd edition

Also, we can trick jquery (AFAIK) into executing the handlers in a particular order by using queue() method, and call the dequeue() method to invoke the methods inside that queue, in the order defined when creating the queue. But this is not a permanent solution, as, though dequeue does executes them in the order defined, but also removes them from queue after executing. So, this is a one time solution, once we are done with the queue, the order (for the sake of which we created the queue in first place!) is gone.

So, I wanna know, is there a workaround or a solution for this or not? And if so, does that depends on our requirements? Like handling the click event, or loading async data via load using ajax?

Upvotes: 0

Views: 3409

Answers (3)

jfriend00
jfriend00

Reputation: 708156

Why use multiple event handlers if you need code to execute in a particular order?

It will generally lead to much more maintainable and obvious code if you use one event handler that executes your multiple function calls in your desired order.

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

"I know we can establish many event handler via addEventListener, but the order of their execution isn't guaranteed."

Order of execution isn't guaranteed for event handlers bound with addEventListener(), but order of execution definitely is guaranteed for event handlers bound with jQuery. jQuery calls your handlers in the same order they were bound.

This isn't made very obvious in giant bold text in the jQuery documentation, but it is there if you look hard enough. From the .on() method doco:

(Event handlers bound to an element are called in the same order that they were bound.)

Or in more detail from the .bind() method

When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

Upvotes: 4

Tarik
Tarik

Reputation: 81831

I could use callback functions and handle events in these functions.

function helloWorld(hello,callback)
{
   //does something here with hello 
   callback(); //calls the callback function for final execution
}

helloWorld("world",alertUser);

function alertUser(){
  alert("I am done with this function");
}

So if I understood your question OK, then I do something like the above.

Upvotes: 0

Related Questions