Asynchronous or Synchronous calling of event handlers in javascript

javascript jquery asynchronous event-handling synchronous
sachinjain024 picture sachinjain024 · Apr 10, 2013 · Viewed 13.3k times · Source

Are event handlers executed synchronously or asynchronously in JavaScript? Here is JS bin which is showing that event handler is executed synchronously.

Code:

$('#toclick').bind('custom', function() {
    for (var i=0; i<100000; i++) {}
    console.log('Inside click handler');
});

$('#toclick').trigger('custom');
console.log('Outside click handler');

Output:

Inside click handler
Outside click handler

This means if we trigger an event, the code below it won't be executed unless all the event handlers are executed. Am I right ?

Bin with multiple event handlers

Answer

freakish picture freakish · Apr 10, 2013

That's correct. All event handlers are fired synchronously and in order of binding.

Related questions

How do I return the response from an asynchronous call?

I have a function foo which makes an asynchronous request. How can I return the response/result from foo? I tried returning the value from the callback, as well as assigning the result to a local variable inside the function …

Read More
How can I upload files asynchronously?

I would like to upload a file asynchronously with jQuery. Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Read More
How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

I have a JavaScript widget which provides standard extension points. One of them is the beforecreate function. It should return false to prevent an item from being created. I've added an Ajax call into this function using jQuery: beforecreate: function (…

Read More