Question

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

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

请注意，处理程序可以多次触发，因为连续（长）拖动中的多个事件，以及用户在动画期间快速拖动多次（这样我就不能依赖'release'事件？）。

此外，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;
}

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

1 个答案: