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时间时，它会被破坏并造成不必要的行为。我正在使用标志，因此只有当＆＃34;运行＆＃34;时才能调用该函数。是false，当应该移动的最后一个元素的转换结束时，我返回false。它适用于前几次点击，但快速点击会破坏它并打破整个脚本。

直播demo（快速点击快速xxx次以查看行为）

是什么导致这个？该标志仅在转换结束时设置，那么为什么要调用该函数？有没有办法解决这个问题，或者我为此使用暴力（承诺）？

Answer 1

这似乎是你的问题：

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

阻止函数调用，直到flag设置为true

1 个答案: