-1

Say I have some code like this:

$("#start").click(function1);
$("#start").click(function2);
$("#start").click(function3);

// I need function1, function2 and function3 be all executed when
// the #start button on this page
// is clicked, and in the order that I bind them.

When I click the #start button, will the order be ALWAYS function1, function2, function3? Is there any risk that the order could be random?

Thanks,

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119

2 Answers2

2

When I click the #start button, will the order be ALWAYS function1, function2, function3?

Yes. jQuery ensures it, even on browsers that don't (mostly obsolete ones now).

Simply searching for "order" in the on documentation answers this:

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

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • So if I use native JavaScript API it's random. And if I do it with jQuery like what I did in the question, it's under guarantee? – AGamePlayer Nov 16 '16 at 12:26
  • except if there is any async processes in one of the functions there – madalinivascu Nov 16 '16 at 12:26
  • 2
    @AwQiruiGuo: No, not random. `addEventListener` is also guaranteed to execute them in the order they were bound. Microsoft's proprietary predecessor to it, `attachEvent`, executed them in the reverse order. jQuery normalizes to the standard. – T.J. Crowder Nov 16 '16 at 12:27
  • 2
    @madalinivascu: No, the handler order is guaranteed. Naturally if they start async operations, the *completion* of those operations may occur in a different order. That's irrelelvant here. – T.J. Crowder Nov 16 '16 at 12:27
  • That is very helpful. Thanks very much for such a quick answer! After 9 mins (that I have to wait) I will credit you. – AGamePlayer Nov 16 '16 at 12:28
0

How about a Snippet to prove test the point.. ->

New game, see if anyone can get the number in a different order :)

function makeFn(ref) {
  return function Fn() {
    console.log(ref);
  }
}


$("#start").click(makeFn(1));
$("#start").click(makeFn(2));
$("#start").click(makeFn(3));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Start</button>
Keith
  • 22,005
  • 2
  • 27
  • 44
  • Awesome. First time to see the console output this way! – AGamePlayer Nov 16 '16 at 12:29
  • 3
    An example doesn't prove anything. – Bergi Nov 16 '16 at 12:29
  • 1
    That's true.. But doesn't harm. Maybe the word prove was wrong, I maybe should have said test. eg. Test runners of course work on this principle. – Keith Nov 16 '16 at 12:31
  • @Bergi Yes. That is what I got confused. But the other answer makes me feeling safe. – AGamePlayer Nov 16 '16 at 12:31
  • i got order different because i was looking from down :P – Mahi Nov 16 '16 at 12:32
  • Crikey, how many sheeple does @Bergi have.. I mean obviously someone has seen his comment, and though oh!!, better upvote him & then downvote this as Mr Bergi has created one of his flippant remarks.. Cool..!! – Keith Nov 16 '16 at 12:47
  • yes T.J. Crowder downvoted this :P – Mahi Nov 16 '16 at 12:52
  • Oh well,. Maybe he had his reasons.. But I would point out even his response is not proof, as of course bugs do happen. I'm a little surprised as he is from the UK, I would have expected better manners. Hope he shows his customers more respect.!! – Keith Nov 16 '16 at 13:29