Evite el manejo de eventos de deslizamiento duplicados con animación de biblioteca externa

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?

preguntado el 13 de septiembre de 13 a las 12:09

1 Respuestas

Puedes hacer algo como esto:

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;
}

Respondido el 13 de Septiembre de 13 a las 12:09

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. - momento

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.