Implementing a trigger callback with jQuery

As we move into a more and more interactive era of website development, more of the JavaScript array work is being done asynchronously and not “top-down”. This can provide some interesting challenges, for example, executing a specific action after a specific process has been completed – also known as a callback. Thankfully, jQuery provides some useful functions to help with this process. This article will explore using $(window).trigger();.

Scroll Top Animation with jQuery

To begin, let’s explore a basic example. In this example, I will perform a basic animation that will scroll the user down to the content they are looking for:

[code]
function scrollTo(target) {
var $target = $(“#” + target);
if ($target) {
$(‘html,body’).animate( { scrollTop: $target.offset().top }, 700 );
}
}
[/code]

In the above example, the scrollTo function accepts an id of an element in the DOM. This is assigned to a local variable. If the element exists, the browser will scroll down to its top offset over a period of 700 milliseconds.

The above example can easily be updated to add a third parameter for the on complete of the animation:

[code]
function scrollTo(target) {
var $target = $(“#” + target);
if ($target) {
$(‘html,body’).animate( { scrollTop: $target.offset().top }, 700, function() {
// do something on complete
} );
}
}
[/code]

jQuery Trigger Function

That in itself can be quite useful; however, in this article I want to specifically explore jQuery’s trigger function. The trigger function is a great way to execute built-in events, such as click, scroll, etc… but it can also be used to execute custom events. In the following example, I’m going to amend the previous example to bind a custom event to a function and then trigger that event in the completion of the animation.

[code]
function scrollTo(target) {
$(window).on(‘animationComplete’, ‘animationComplete(‘\” + target + ‘\’)’);
var $target = $(“#” + target);
if ($target) {
$(‘html,body’).animate( { scrollTop: $target.offset().top }, 700, function() {
$(window).trigger(‘animationComplete’);
} );
}
}

function animationComplete(target) {
$(window).off(‘animationComplete’);

// do something on complete
}
[/code]

In the above example, the first line of the scrollTo function creates the event listener called animationComplete. When this is triggered, the function animationComplete is called. Then inside of the on complete for the animation, this event is triggered. Finally, inside of the animationComplete function, the event is cleared.

If the event is not cleared, and the on function is called multiple times, the effect will stack. The reason why the on function is set inside of the scrollTo function each time is to pass the original target. This is a great example of how to pass data as well through the callback. Of course if you do not need to pass data, the event could be defined globally outside of the function just once and then it would not need to be cleared each time.

With the use of jQuery, custom events can be created and executed through the trigger function. An excellent way to perform a series of processes in the correct order, when by default they are done synchronously.