0

I have a drag event handler which starts (1) an animation, and (2) adjust a counter. When I drag the target, multiple handlers will be triggered several times, and the counter is wrong. The touch event is based on Hammer.js.

$(hammer).on('swipeleft',function(){
   doAnimation();
   counter++;
}

Note that the handler could be triggered for multiple times both because multiple events in a continuous (long) drag, and user's quickly dragging for multiple times during the animation (so that I cannot rely on 'release' event?).

Also, the doAnimation() is wrapped in a separate animation library, so I don't want to mess some codes in that library (unless I have no other choices). An extreme case is that I use -webkit-transition feature to implement the animation,

$(hammer).on('swipeleft',function(){
   $('.content').css('width',0);//-webkit-transition: all 0.5s ease;
   counter++;
}

How can I deal with such situation?

mrmoment
  • 727
  • 2
  • 10
  • 34

1 Answers1

0

You can do something like this :

var isDraging = false;

// -- Increment counter only if this is the first drag event:
$(hammer).on('drag',function(){
   doAnimation();
   if(!isDraging)
      counter++;
   isDraging = true;
}

// -- When dropping, set flag to false again:
$(hammer).on('drop',function(){
   isDraging = false;
}
Scalpweb
  • 1,971
  • 1
  • 12
  • 14
  • Well, I may use misleading words of 'drag'. I mean 'swipe', and immediate setting a flag is not good. The ideal case is that setting the flag in doAnimation() when the animation is ended. – mrmoment Sep 14 '13 at 00:31