JQuery for asynchronous events

Question

I have one html button that should fire 3 events asynchronously.

If I have this:

$('#id').click(function(e) { func1(); }); $('#id').click(function(e) { func2(); }); $('#id').click(function(e) { func3(); }); 

Am I getting concurrency? Or, if one function takes a lot of time, the next is blocked? How does javascript handle these consecutive calls?

Thanks,

Answer 1

Am I getting concurrency?

No.

Or, if one function takes a lot of time, the next is blocked?

The next one is blocked until the first one is executed.

How does javascript handle these consecutive calls?

Your three event handlers on the same object will be called sequentially one after another and will not start at the same time. Event handlers for the same event on the same object are executed in the order they are attached one after the other.

Javascript runs one function until it is complete. And while this one function works, no other Javascript will work (except for webWorkers, but that's not what we're talking about here). This way, each of your event handlers will run one after another, one after another.

You cannot create your own asynchronous Javascript, which will be executed simultaneously with some other Javascript function. Asynchronous operations in Javascript, which can be performed in parallel with other operations, require external async support for this.

You can use existing asynchronous operations in your own functions, such as setTimeout() or Ajax calls, to create some kind of behavior similar to asynchronous use, but the actual asynchronous operation will occur in existing async operations that are implemented in native code.

---

FYI, in a browser, you can use webWorkers to run code in a parallel execution thread. The problem with webWorkers is that they must run in a completely separate environment (without common variables or functions) and can only communicate with the main JS thread through messaging, which coordinates them through the event queue (to prevent thread synchronization problems). This can be useful for some things, such as long computations, that you do not want the user interface to be blocked, but limited enough in what it can and cannot do (for example, cannot modify the DOM).

Answer 2

“One function takes a lot of time, the next one is blocked” - the code that you shared with us will behave this way.

You need to implement asynchronous events explicitly since @Zakaria Acharki shared the link.

Answer 3

JavaScript is single-threaded, so the three functions will not be executed at the same time (if you are not using web workers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers ). Therefore, for optimization, it is important to think about the execution order.

Since you use jQuery and you attach 3 different handlers to the same element, jQuery guarantees execution in binding order. So, the first handler will execute, then the second, etc. Therefore, if the first handler takes some time, it blocks the execution of the second.

If this is not the desired behavior, I would recommend the @Zakaria Acharki link in the comment above.

It is important to note that if you have not used jQuery, the execution order of the event handlers is technically undefined.

For more information on the order of events, see http://www.quirksmode.org/js/events_order.html