Events play an important role in JavaScript development. Coupled with asynchronous behavior, the programming model for events is challenging. Event handlers often perform some asynchronous action (AJAX or animations) and subsequent event handlers should wait for this action to complete. Pause-resumable events are an improvement on jQuery's event system to handle this problem more elegantly.
Pause-Resumable events, introduced in 3.2, are a mechanism that allows events to be paused and resumed later. This type of behavior is typically used when waiting for asynchronous or validation behavior to complete.
Previously, imagine when you were to create a tabs widget which requires the user click a checkbox in the content before switching tabs. Once the tab's click event fired, a parent widget would listen for this event and cancel it to stop the propagation. At this point, it would ensure validation met the requirements and if so re-trigger the event for the tabs to continue and somehow by-pass this validation check again.
While this problem isn't hard to solve, imagine hundreds of different validations with several different widgets. As the requirements for the project grows, the less maintainable the code becomes.
With the introduction of Pause-resumeable events, you can clean up this type of workflow up easily. In the example described, when the click event occurs the parent widget listens for this event and calls event.pause() to stop the event from bubbling. It performs the validation and when ready, calls event.resume().
Building on the example in the How section, below is sample code for a tabs widget that uses Pausable and Resumable Events. The tabs widget has a parent that listens for a 'show' event and validates the checkbox was clicked in the first content area. Once the validation succeeds, the event is resumed to show the next tab's content.
Below we listen for '.button' to be clicked passing a callback. When the event has successfully completed, it will trigger 'show' on the next panel.
$.Controller('Tabs',{
".button click" : function(el){
var panel = this.getPanelFromButton( el );
panel.triggerAsync('show', function(){
panel.show();
})
}
})
Once the item was clicked, a parent listens for the 'show' event and pauses the event. It then checks the form in the first tab for the checkbox to be clicked and resumes the event.
$('#parentDiv').bind('show', function(event){
event.pause();
if($('#tab1').find('input:checkbox').is('checked')) {
event.resume();
}
});
For more in-depth documentation and demo, check out our (documentation library)[http://www.javascriptmvc.com/jmvc/docs.html#!jquery.event.pause]. Our (MXUI tab widget)[https://github.com/jupiterjs/mxui/tree/master/nav/tabs] also utilizes these events.
The use cases for this type of event management are wide. It ranges anywhere from pausing a tab click and loading HTML in the next tab to handling a large application that is constantly validating form input and show/hiding items.
Pausable and Resumable Events allow you to handle this type of event management for validating and resuming events with ease and more maintainable code.