Question

我有一个滑块代码：

$('#left-product-slide').click(function(event){
var winwidth = $(window).width();
var left = $('.line-product').position();//Вычисляем позицию слайдера
var position = left.left+parseInt('-'+productwidth,10);//Вычисляем сдвиг по линии
if(position <= '-'+linewidth){
    $('.line-product').css('left',0);
}else{
    $('.line-product').css('left',position+'px');
}
});

一切顺利。但是，当我快速点击按钮时，我的幻灯片元素会被移动几次，尽管它们不应该移动。我认为这种情况正在发生，因为我快速点击，功能开始，因此左侧位置失真。我的问题是：如果还没有完成，怎么才能再次运行该功能呢？

Answer 1

使用.one()方法。

    $( "#left-product-slide" ).one( "click", function() {
      var winwidth = $(window).width();
      var left = $('.line-product').position();
      var position = left.left+parseInt('-'+productwidth,10);
      if(position <= '-'+linewidth){
        $('.line-product').css('left',0);
      }else{
        $('.line-product').css('left',position+'px');
     }
   });

Answer 2

您可以使用测试值来检查幻灯片是否仍然存在

var isSliding = false;
$('#left-product-slide').click(function(event){
  if (isSliding)
    return;
  else {
    isSliding = true;
    var winwidth = $(window).width();
    var left = $('.line-product').position();//Вычисляем позицию слайдера
    var position = left.left+parseInt('-'+productwidth,10);//Вычисляем сдвиг по линии
    if(position <= '-'+linewidth){
      $('.line-product').css('left',0);
    }else{
      $('.line-product').css('left',position+'px');
    }
    isSliding = false;
  }
});

Js Jquery事件重演

2 个答案: