Question

var slideContainer = ('#slider');  
var width = 720;

function slide () {  
  if ( parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
    $slideContainer.animate({'margin-left': '-='+width},200);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='button' onclick='slide()'></a>

我有这个简单的功能，问题是当我点击动画速度超过150的按钮多次点击时，滑块容器向左移动超过-2160我的if条件的限制。

Answer 1

＆＃13;

var slideContainer = ('#slider');  
var width = 720;
var clicked = false;

function slide () {  
      if ( clicked ) return;
      clicked = true;
      if (parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
        $slideContainer.animate({'margin-left': '-='+width},200,"linear",()=>{
clicked=false;});
       }
}

＆＃13;

<a class='button' onclick='slide()'></a>

＆＃13;

Answer 2

您可以通过以下两种方式实现这一目标 -

您可以使用flag变量来指示动画仍处于进程中 - 初始设置为false，然后在动画开始时设置为true，在动画完成时设置为false，将此标志与＆amp;在if中表达。
虽然有点复杂但仍能解决目的，你可以试试这个 - 在内部功能幻灯片中写下以下代码段 -

var events = $._data(sliderContainer[0], 'events');
                        handler = events.click;
                        events.click = null;

slideContainer.animate({'margin-left': '-='+width},{duration: 200, complete:function(){evends.click = handler }});

希望这会有所帮助..

如何使用JavaScript或jQuery防止多次点击？

2 个答案: