|Written by Ian Elliot
|Monday, 21 August 2017
Page 3 of 3
You can create true asynchronous events if you want to.
The Key to doing this are the setInterval and setTimeOut functions. These will place a message in the event queue that calls a function after a set time. The setInterval function arranges to call the function repeatedly at the set interval.
You may already be familiar with these functions as ways of calling functions after a delay or periodically, but they can also be used to create a custom asynchronous event.
All you have to do is call setTimeOut with a delay of zero and use it to dispatch the event:
This effectively puts the function that dispatches on the event queue and then returns immediately. Of course, the function will not be processed by the event queue until the UI thread is released and so now what you see is;
which is the asynchronous behavior of a true event.
In practice you can wrap the setTimeout in a suitable function and hide a little of what is going on:
With this function defined we can simply write:
The difference between synchronous and asynchronous events is important - make sure you are using the correct implementation..
Working With The Dispatch Queue
It is worth noting that the setTimeout function is one of the few ways you have of interacting with the dispatch queue. You can use it to add any function to the dispatch queue using a time delay of zero. The only problem is that the HTML5 specification limits the time delay to a minimum of 4ms. This is enforced by most browsers and this means that your custom event is going to a little slower than you might expect from a zero millisecond delay. Some older browsers make use of an even longer minimum delay of 10ms. Of course the timeout will not happen until the function that used setTimeout finishes and hands back the UI thread to the dispatcher.
If you demand the fastest custom event handling then you need to make use of the window.postMessage method which is only supported in modern browsers.
This will send a message which causes a message event o another window. If all you want to do is add an event to the event queue you can use it to send a message to the same window:
This places a message event into the event queue with the message payload "fireEvent", As soon as the UI thread is free to process events a message event occurs on the current window. There is no minimum delay in using postMessage.
A version of the fireEvent utility function using postMessage is easy to create:
This sets up a function, fire, which triggers the custom event. It then adds fire to respond to the message event. After this the event is added to the event queue. When the UI thread is freed the message event occurs and triggers fire which in turn runs the custom event and removes fire as a message event handler so that it will not be accidentally triggered again.
You can, of course, improve on this function and you might want to leave an event handler attached to the window message event ready to handle custom events.
Now Available as a Book:
You can buy it from: Amazon
or email your comment to: email@example.com
|Last Updated ( Monday, 21 August 2017 )