Speed is everything on touch devices. Calling a function when a touch swipe has completed instead of calling it multiple times… For example you may use it to update some navigation based on a finger swipe. FYI I’m using hammer.js to capture the touch events and underscore.js internal behavior to handle the debouncing.

// Create the listener function (debounce).
var updateCarouselNav = _.debounce(function(e) {

    console.log('checking nav....');

}, 500); // Maximum run of once per 500 milliseconds

//detect actions on carousel for update of navigation buttons
$("#carousel").on("release dragleft dragright swipeleft swiperight", function()
{
    updateCarouselNav();
});

Proof it works!

Before:

debounce-1

After:

debounce-2

Extra reading: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


No Reader comments

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.