Остановка события и восстановление после завершения анимации с помощью Javascript / jQuery

Question

Я искал и нашел три довольно хороших поста, но все они анимировались при щелчке, а не при щелчке, отправляя параметры в функцию, которая анимирует, поэтому ни .stop (), stop (true, true), ни event.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');
        }
         }

спасибо за понимание!

Answer 1

Мне нужно понять, где сказать: «Хорошо, что-то щелкнуло, не допускайте других нажатий, пока не появится соответствующее изображение».

Я думаю, что простое решение состоит в том, чтобы использовать :animated селектор 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
}