Question

我遇到动画问题。

var i = 0;
$('.next').on('click', function() {         
  if (i < 4) {      
        $('li').animate({'left': '-=600px'}, 300);  
        i++;
  }
  console.log($('li:first').position().left);
  console.log(i);
});

$('.back').on('click', function() {
    if ($('li:first').position().left < 0) {    
        $('li').animate({'left': '+=600px'}, 300);
        i--;
  }
  console.log(i);
});

https://jsfiddle.net/6t1wx95f/10/

当您在按钮上单击4次＆＃39;下一步＆＃39;时，您将看到所有图像，一切正常。但是如果你多次点击它并且速度非常快，它将停止工作并且你不会看到最后一张图像。

所以我有两个选择：

动画应该继续（在这种情况下非常快），无论按钮有多快点击了。
等待300毫秒，直到动画结束，然后继续i++ 或i--;。

最简单的解决方法是什么？

Answer 1

我想这是因为你的状况检查：

if (i < 4) {  	
  $('li').animate({'left': '-=600px'}, 300);  
  i++;
}

对于按钮上的每次点击，你都是增量变量 i ，你应该以某种方式禁用按钮，直到动画结束，以避免这种情况。

@edit 这个答案可能对你有帮助，他在谈论css动画事件。 https://stackoverflow.com/a/6210785/8658255

Answer 2

尝试这种方法：

var i = 0;

function next() {
  if (i < 4) {      
    $('li').animate({'left': '-=600px'}, 300);  
    i++;
  }
}

var throttledNext = _.throttle(next, 1200, { leading: true, trailing: false });

$('.next').on('click', throttledNext);

它需要Lodash及其_.throttle()方法。限制的本质只是：

通过使用_.throttle，我们不允许我们的函数执行更多操作每隔X毫秒一次。

因此，所有中间点击（动画阶段之间）都会被抛弃。

Answer 3

我尝试回答我自己的问题并且解决方案很简单，因为我需要的是delay()。

因此，我只使用$('li').animate({'left': '-=600px'}, 300)

而不是$('li').animate({'left': '-=600px'}, 300).delay(600);

https://jsfiddle.net/6t1wx95f/11/

在按钮上单击太快时，animate（）停止工作

3 个答案: