The trigger function appears to be synchronous. That is, all bound functions appear to be executed in sequence, synchronously (the invoked function may do something asynchronously, but that's not the question).
Is this true for custom and non-custom(click, hover, etc) events? Are there any events where the single threaded guarantee of Javascript does not hold true?
If it is true, can the behavior be changed to execute them asynchronously without inserting timeouts into each bound function?
Here is a sample which demonstrates The question:
var ele = $('#blah');
// Example of the bound function doing something synchronously
ele.bind('customEvent.sync', function() {
// Do something synchronously
window.foo = 'foo';
});
// Example of the bound function doing something asynchronously
ele.bind('customEvent.async', function() {
window.setTimeout(function() {
// Do something asynchronously
window.bar = 'bar';
}, 0);
});
// Trigger both events
ele.trigger('customEvent');
// If trigger is guaranteed to be synchronous this should alert 'foo:undefined' or possibly 'foo:bar' depending on whether the asych function was called first
// If trigger is NOT synchronous 'undefined:undefined', 'foo:undefined', 'undefined:bar', or 'foo:bar' could be alerted
alert(window.foo + ':' + window.bar);
UPDATE See: Is JavaScript guaranteed to be single-threaded? Custom events are guaranteed to be synchronous because of the single threaded nature of Javascript. Some built in event types may not be synchronous due to browser inconsistencies.
The jQuery. each method loops Synchronously, but you can't guarantee that it'll loop through the items in any specific order.
You can use jQuery to support both synchronous and asynchronous code, with the `$. when` function, and your code doesn't have to care whether or not it's async.
jQuery trigger() Method The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements. This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event.
JavaScript is Synchronous Spoiler: at its base, JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time.
A lightly modified anthology of comments offered above by myself - Beetroot-Beetroot :
Events have no duration; providing a handler is attached, they cause a thread to start. Therefore an event, in itself, can be neither synchronous nor asynchronous. The thread that an event stimulates will always be synchronous but may kick off one or more asynchronous processes.
A call to .trigger()
is always synchronous regardless of any asynchronous processes that might be started in the triggered event handler. When the triggered handler returns, execution reverts to the statement following .trigger(...). ie, .trigger() is a glorified function call.
In javascript, the current thread is absolutely guaranteed to run to completion before anything put in place with setTimeout() starts, even if the timeout duration is 0. Same with ajax - a thread that calls, say, $.ajax(...)
is guaranteed to run to completion before any of the success/error/complete handlers commences, even if the server was to respond immediately.
Single-threadedness is inherent to ECMA-262 (javascript), ie. at any moment in time, a maximum of one thread can be running.
Additional point :
The acceped answer to Is javascript guaranteed to be single-threaded? is based on a false premise. No evidence is offered that javascript is not single-threaded. The comment by @KrisGiesing debunks the misunderstanding.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With