Set execution order of event-handlers of click event in jQuery?

Question

I am using jQuery 1.9.1.

Suppose i have a button with id="clickMe" My jQuery code is:

$('#clickMe').click(function(event)
{
    eventHandler1();//do something
    eventHandler2();//use output from eventHandler1() and do something
}

Now, i want "eventHandler2" to be executed at last so that i could use the output of "eventHandler1". Is there any way to do this manually and not just the way i have put the handlers inside the click event? One more thing, "eventHandler1()" and "eventHandler2()" are present in different .js files and thus the requirement.

i can tell you that all these handlers work without page reload — spyder
– spyder, Commented Apr 17, 2013 at 6:33
Does this answer your question? How to order events bound with jQuery — starball
– starball ♦, Commented Jan 23, 2024 at 0:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

`jQuery.when()` provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

For example, when the Deferreds are jQuery.ajax() requests, the arguments will be the jqXHR objects for the requests, in the order they were given in the argument list.

$.when(eventHandler1).then(eventHandler2).done(function(){
 alert('done.');
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 17, 2013 at 6:39

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

spyder Over a year ago

thanks mate! even though i found another way of dealing with my not-so-complex problem, this approach surely works :)

Jai Over a year ago

Oh Great and glad this helped.

Dipesh Parmar · Accepted Answer · 2013-04-17 06:47:12Z

1

So can even use GLOBAL variable to store eventHandler1 output and access that inside eventHandler2

Example

var someVar;

function eventHandler1()
{
   // process
   someVar = some value from process
   return someVar;
}

function eventHandler2()
{
   alert(someVar);
}

Response to OP comment

as you have asked about execute handler in queue you can use Jai answer.

you can use .when .then and .done as below.

$.when(eventHandler1).then(eventHandler2).done(function(){
  //process code
});

edited Apr 17, 2013 at 6:47

answered Apr 17, 2013 at 6:31

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

3 Comments

spyder Over a year ago

eventHandler1() dynamically filters the data.it is a long plug-in.i would rather not make any changes there...just want to make eventHandler2() the last to execute

Dipesh Parmar Over a year ago

@spyder so you can use jQuery.done() handler to make sure that eventHandler 1 is finished.

Dipesh Parmar Over a year ago

@spyder see Jai answer that what i mean/

Collectives™ on Stack Overflow

Set execution order of event-handlers of click event in jQuery?

2 Answers 2

`jQuery.when()` provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

jQuery.when() provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`jQuery.when()` provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.