停止事件并在动画完成后恢复，w/Javascript/jQuery

我搜索并找到了三篇相当不错的帖子，但它们都是在单击时设置动画，而不是单击时将参数发送到一个既不设置动画的函数。stop（）、stop（true，true）也不设置事件。stopPropagation（）可以工作，尽管可能我放错了位置。因此，我的问题是

我试图阻止的是（无论出于何种原因）点击快乐旋钮，它快速点击所有可用链接，并将用于计算滑块div/图像位置的数学搞砸。一旦动画停止，图像就不正常了，所以我需要知道在哪里说，“好的，有些东西被点击了，在适当的图像出现之前，不要允许任何其他点击。”

同样，我尝试做的和我发现的不同之处在于，动画调用不是直接在单击下进行的，而是在单击进行了一些计算并将这些数字发送到不同的函数之后进行的

我有这个：

 $('#navs li').click(function() {
    var currentLocationNum = $('li.cs_current').index();
    var stepClicked = $(this).index();
    if (stepClicked == currentLocationNum)
       { return false;
       }
       else {
            var lftEdgeNx = $('.slidingChartHolder').position().left;
            var newLeftEdge = (stepClicked - currentLocationNum) * imageWidth;              
            moveMaster(lftEdgeNx + newLeftEdge, stepClicked);
       }
    });

以及移动功能：

function moveMaster(leftEdge, newcs_current) {
    $('.slidingChartHolder').fadeTo(200, .2).animate({
        left: leftEdge
    }, "fast").fadeTo(200, 1);
    $('li.cs_current').removeClass('cs_current')
    $('li:eq('+newcs_current+')').addClass('cs_current');

      if ($('li.cs_current').index() === 0) {
            $('#previous').addClass('hideMe');
            $('#next').removeClass('hideMe');
        } else if ($('li.cs_current').index()==4){
            $('#previous').removeClass('hideMe');
            $('#next').addClass('hideMe');
                   }
        else {
            $('#previous').removeClass('hideMe');
            $('#next').removeClass('hideMe');
        }
         }

谢谢你的一些见解

我需要知道在哪里可以说，“好的，有些东西被点击了，在合适的图像出现之前，不要允许任何其他点击。”

我认为简单的解决方案是使用jQuery，它可以让您测试是否有动画正在进行。所以你可以这样做：

$('#navs li').click(function() {
   if ($(".slidingChartHolder").filter(":animated").length > 0)
      return;

   // your existing click code here
});

或者，jQuery动画方法允许您提供一个回调函数，该函数将在动画完成后执行。因此，在启动动画时，可以设置一个标志来指示动画正在进行，然后从回调中重置该标志。然后单击测试该标志，如果动画已在进行中，则不执行任何操作。所以你可以这样做：

var allowClick = true;

$('#navs li').click(function() {
   if (!allowClick)
      return;

   // your existing click code here
});

function moveMaster(leftEdge, newcs_current) {
    allowClick = false;
    $('.slidingChartHolder').fadeTo(200, .2).animate({
        left: leftEdge
    }, "fast").fadeTo(200, 1, function() {
        allowClick = true;
    });

    // your existing add/remove class code here, noting that
    // adding and removing classes doesn't happen on the animation queue
}

---

看起来这一个最好用一个。