How to fire method only once when using panright with Hammer.js?

Question

I am running into issues with getting Hammer.js (with the jQuery plugin) to function properly when using swiperight. Therefore, I need to use panright.

When panning to the right, my event fires many, many times.

How can this be updated so it only runs once? (then again when the user swipes to the right or left on another slide)

$('.slide').hammer().on('panright', doSomething);

Answer 1

I think you should capture a panend event. For example:

var myElement = document.getElementById('myID');
var mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan({direction:Hammer.DIRECTION_HORIZONTAL, threshold:80, pointers: 0}));
mc.on("panend", function(ev) {
  if(ev.direction == Hammer.DIRECTION_RIGHT) 
  {
    //do what you want here
  }
});

Answer 2

You can filter the event by isFinal property:

var mc = new Hammer($('.screen'));
mc.on("swipeleft", moveHandler);
mc.on("swiperight", moveHandler);

function moveHandler(event){
  if(event.isFinal){
  // do something on the last animation frame
  }
}