如何用JavaScript或jQuery防止重复点击？解决滑块动画越界问题

这是个很常见的jQuery动画队列坑～当你快速点击按钮时，前一次的动画还没完成，jQuery就把新的动画请求加到队列里了。每次判断marginLeft的时候，取的是当前瞬间的数值（还没跑完上一次动画），所以即使几次动画加起来会超过-2160，每个单独的判断都会通过，最后就导致滑块滑过界了。

另外先提个小错误：你原来的代码里var slideContainer = ('#slider');漏了jQuery的$符号，应该改成var $slideContainer = $('#slider');，不然后续调用$slideContainer.css()会报错哦。

下面给你两种常用的解决方案：

方案一：停止当前动画再执行新操作 #

每次点击时先清空之前的动画队列，确保基于当前实际位置判断是否可以继续滑动：

var $slideContainer = $('#slider');
var width = 720; 

function slide () {
  // 停止当前动画并清空队列，保持当前位置
  $slideContainer.stop(true, false);
  
  // 获取当前marginLeft值，记得加第二个参数10确保是十进制解析
  var currentMargin = parseInt($slideContainer.css('marginLeft'), 10);
  
  // 计算滑动后的最终位置，判断是否超出限制
  if (currentMargin - width >= -2160) {
    $slideContainer.animate({'margin-left': '-=' + width}, 200);
  } else if (currentMargin > -2160) {
    // 如果剩下的距离不够一个width，直接滑到限制位置
    $slideContainer.animate({'margin-left': -2160}, 200);
  }
}

stop(true, false)的作用：

• 第一个true：清空所有待执行的动画队列，避免堆积
• 第二个false：不强制跳转到当前动画的结束状态，保持滑块在当前位置再继续操作

方案二：动画期间禁用按钮 #

如果不想让用户中途打断动画，可以在点击后禁用按钮，直到当前动画完成再重新启用：

var $slideContainer = $('#slider');
var width = 720; 
var $button = $('.button'); // 先获取按钮元素

function slide () {
  // 点击后立即禁用按钮，防止重复点击
  $button.prop('disabled', true);
  
  var currentMargin = parseInt($slideContainer.css('marginLeft'), 10);
  
  if (currentMargin - width >= -2160) {
    $slideContainer.animate({'margin-left': '-=' + width}, 200, function() {
      // 动画完成后重新启用按钮
      $button.prop('disabled', false);
    });
  } else if (currentMargin > -2160) {
    $slideContainer.animate({'margin-left': -2160}, 200, function() {
      $button.prop('disabled', false);
    });
  } else {
    // 已经滑到最左了，直接启用按钮
    $button.prop('disabled', false);
  }
}

两种方案各有优势：方案一更灵活，允许用户随时调整滑动；方案二更严谨，完全避免动画队列堆积的问题，你可以根据需求选择～

内容的提问来源于stack exchange，提问作者ahmed