CODEWITHSUNDEEP
javascriptjqueryajax
user4211028
user4211028

Reputation:

jQuery for asynchronous events

I have one html button that needs to trigger 3 events asynchronously.

If I have this:

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

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

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

Do I get the concurrency? Or if one function takes long time, the next one gets blocked? How does Javascript handle this sequential calls?

Thanks,

Upvotes: 6

Views: 2942

Answers (3)

jfriend00
jfriend00

Reputation: 707436

Do I get the concurrency?

No.

Or if one function takes long time, the next one gets blocked?

The next one is blocked until the first one is done executing.

How does Javascript handle this sequential calls?

Your three event handlers on the same object will be called one after another sequentially and will not run concurrently. 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 completes. And while that one function is running, no other Javascript will run (other than webWorkers, but that isn't what we're talking about here). So, each of your event handlers will run one at a time, one after the other.

You can't create your own asynchronous Javascript that will execute at the same time as some other Javascript function. Asynchronous operations in Javascript that can run in parallel with other operations require outside async support in order to do that.

You can use existing asynchronous operations in your own functions such as setTimeout() or Ajax calls to create some async-like behavior, but the actual asynchronous work will happen in existing async operations that are implemented in native code.

FYI, in a browser you can use webWorkers to run code in a parallel thread of execution. The challenge with webWorkers is that they must be run in a completely separate environment (no shared variables or functions) and can only communicate back with the main JS thread via messaging which coordinates through the event queue (to prevent thread synchronization issues). This can be useful for some things such as long computations that you don't want the UI to be blocked for, but is fairly restricted in exactly what it can and can't do (can't modify the DOM, for example).

Upvotes: 2

winhowes
winhowes

Reputation: 8065

JavaScript is single threaded, so the 3 functions won't execute concurrently (unless you're using web workers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). So to optimize an important thing to think about is order of execution.

Because you are using jQuery and you're attaching 3 different handlers to the same element, jQuery guarantees execution in the order of binding. So the first handler will execute, then the second, and so on. So if the first handler takes a while, it will block the second one from executing.

If this is not the desired behavior, I'd recommend checking @Zakaria Acharki's link in the comment above.

It's important to note, that if you were not using jQuery, the order of execution of the event handlers is technically undefined.

For more info on event order see: http://www.quirksmode.org/js/events_order.html

Upvotes: 2

Sudipta Kumar Maiti
Sudipta Kumar Maiti

Reputation: 1709

"One function takes long time, the next one gets blocked" - The code you've shared with us will behave this way.

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

Upvotes: 3

Related Questions