How to make sure an event handler is executed after the same event handler is done?

Question

Essentially, this is my code:

$('#press').click(function() { alert('First') });
$('#press').click(function() { alert('Second') });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="press">press</button>

How can I make sure if the second event handler-$('#press').click(secondFunction); is executed only after the first event handler-$('#press').click(firstFunction); is finished?

Possible duplicate of [Jquery - Make sure event handler is last to be executed in chain of handlers](http://stackoverflow.com/questions/3150841/jquery-make-sure-event-handler-is-last-to-be-executed-in-chain-of-handlers) — Heretic Monkey, Dec 20 '16 at 15:30

score 3 · Answer 1 · answered Dec 20 '16 at 15:22

3

How can I make sure the second event handler is executed only after the first event handler is finished?

Using your current pattern you can't. However you could call them sequentially inside a single event handler, like this:

var firstFunction = function() { alert('First') };
var secondFunction = function() { alert('Second') };
$('#press').click(function() {
  firstFunction();
  secondFunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="press">press</button>

answered Dec 20 '16 at 15:22

Rory McCrossan

331,213
40
305
339

Unfortunately, in my case I can't join together those events nor the functions. – Yusril Maulidan Raji Dec 20 '16 at 15:24
Why is that? If you can provide function references then this should be possible. – Rory McCrossan Dec 20 '16 at 15:26
Well, I just wanted to make it more readable, therefore I put the function references. :) If it gives a confusion, let me edit my snipped code then. – Yusril Maulidan Raji Dec 20 '16 at 15:29

score 2 · Answer 2 · answered Dec 20 '16 at 15:23

Use callbacks as shown below

var firstFunction = function(callback) {
  alert('First');
  callback();
};
var secondFunction = function() {
  alert('Second')
};

$('#press').click(function() {
  firstFunction(secondFunction);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="press">press</button>

How to make sure an event handler is executed after the same event handler is done?

2 Answers2