javascript - 在标志设置为真之前阻止函数调用

Question

我已经创建了非常简单的画廊。元素在使用

单击时增加或减少它们的变换位置

 function pushIt(max, target, index, count) {

    if (count == max ) {
      target[index -1].addEventListener("transitionend",turnOf,false);
      return;
   }

   var tmp                  = target[index];
   var matrix               = window.getComputedStyle(tmp).getPropertyValue("transform");
   var translate_left       = matrix.split(",")[4];
   var translate_top        = matrix.split(",")[5].split(")")[0]-215;
   tmp.style.transform      = "translate3d(" + translate_left + "px," + translate_top + "px,0)";
   setTimeout(function(){
    pushIt( max, target, index + 1, count + 1 );
   },50)
 } 
function turnOf(){
  running = false;
  this.removeEventListener(turnOf);
 }

一切正常，但问题是，当我快速单击 xxx 时，它会被破坏并执行不需要的行为。我正在使用标志，因此只有在“running”为 false 时才能调用该函数，当应该移动的最后一个元素的过渡结束时，我返回 false 。它适用于前几次点击，但快速点击会破坏它并破坏整个脚本。

直播demo (快速单击 xxx 次以查看行为)

什么会导致这种情况？该标志仅在转换结束时设置，那么为什么要调用该函数？有没有办法解决它，或者我应该为此使用蛮力( promise )？

Answer 1

这似乎是你的问题:

function turnOf(){
  running = false;
  //this.removeEventListener(turnOf);
  this.removeEventListener("transitionend", turnOf);
 }