Touch Swipe Function Debounce Script

Sam Deering

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/

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.