Question

我在阻止JQuery两次动画方面一直遇到问题。（两次快速点击按钮进行演示）

function slider(){
  var margin = parseInt($("#block").css('marginLeft'));
  if(margin<0){$("#block").animate({marginLeft:"+=50%"},1000);}
  else{$("#block").animate({marginLeft:"-=50%"},1000);}
  };

$(document).ready(function(){

  $("#button").click(function(e){
    slider();
    e.stopImmediatePropagation();
  });
})

#block{
  background-color:red;
  width:40px;
  height:40px;
  margin-left:-20%;
}
#button{
  cursor:pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="button"> Click me</p>

<div id="block"></div>

哪种方法最适合用于暂停功能，直到动画执行完成？到目前为止，我已经尝试使用.stopImmediatePropagation（），setTimeout（）和其他一些方法，但是它们似乎都不起作用。我的逻辑有缺陷吗？还是我没有正确使用功能？

谢谢。

Answer 1

您可以将函数传递给animate，该函数在动画完成后立即运行。因此，您可以拥有一个像doneSliding这样的持久变量-运行slider时，将其切换为false，并且当动画完成时，将其true进行切换。如果在slider仍为doneSliding的情况下调用false，则动画正在进行中，因此请立即返回：

let doneSliding = true;
function slider() {
  if (!doneSliding) {
    return;
  }
  doneSliding = false;
  var margin = parseInt($("#block").css('marginLeft'));
  $("#block").animate(
    { marginLeft: margin < 0 ? "+=50%" : "-=50%" },
    1000,
    () => {
      doneSliding = true
    }
  );
};

$("#button").click(slider);

#block {
  background-color: red;
  width: 40px;
  height: 40px;
  margin-left: -20%;
}

#button {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="button"> Click me</p>
<div id="block"></div>

Answer 2

可以使用jquery is()检查该块是否处于动画状态。

以下代码使用$('#block').is(':animated')，如果为true，则从按钮单击事件返回。

function slider(){
  var margin = parseInt($("#block").css('marginLeft'));
  if(margin<0){$("#block").animate({marginLeft:"+=50%"},1000);}
  else{$("#block").animate({marginLeft:"-=50%"},1000);}
};

$(document).ready(function(){

  $("#button").click(function(e){
    // check if it's animated and return false
    if ($('#block').is(':animated')) {
      return false;
    }
    slider();
    e.stopImmediatePropagation();
  });
})

#block{
  background-color:red;
  width:40px;
  height:40px;
  margin-left:-20%;
}
#button{
  cursor:pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="button"> Click me</p>

<div id="block"></div>

在执行结束之前防止JavaScript方法运行两次

2 个答案: