jquery - 避免使用外部库动画重复滑动事件处理

Question

我有一个拖动事件处理程序，它启动（1）动画，（2）调整计数器。当我拖动目标时，会多次触发多个处理程序，并且计数器错误。触摸事件基于 Hammer.js。

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

请注意，处理程序可能会被触发多次，因为连续（长时间）拖动中的多个事件，以及用户在动画期间多次快速拖动（所以我不能依赖“释放”事件？）。

此外，doAnimation() 被包装在一个单独的动画库中，所以我不想弄乱该库中的一些代码（除非我没有其他选择）。一个极端的例子是我使用 -webkit-transition 特性来实现动画，

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

我该如何处理这种情况？

Answer 1

你可以这样做：

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