как заблокировать функцию яваскрипта от вызова до завершения

Question

как блокировать кнопки мыши события для вызова функции до этой функции завершена, я написал эту функцию:

$(".cycle-next").on('click',function(){ 
 
    var contWidth = $(".container").width(); 
 
    var finalWidth = ((contWidth*.25)*-1)+(parseInt($(".inner").css("left"))); 
 
    var contWidthC = contWidth*-1; 
 
    
 
    if(finalWidth === contWidthC){ 
 
     $(".inner").animate({left:"0"},200,function(){ 
 
         
 
        }); 
 
      } 
 
    
 
});

здесь один раз кликаем на (цикл-следующий), запуск функции, предположим, что контроллер посередине функции, в этот момент пользователь снова нажимает на элемент во второй раз, снова контроллер начинает с начала функции без завершения, как сделать второй щелчок подождать до завершения?

Answer 1

Попробуйте использовать вызов AJAX при нажатии, чтобы отключить кнопку и при успешном вызове AJAX снова включить кнопку. Это последовательное решение

Answer 2

Использование .promise() и $.when() (и IIFE) следует сделать трюк

;(function() { 
    var p = $.when(); // initial "promise" to get things moving on the first click 
    $(".cycle-next").on('click',function(){ 
     p = p.then(function() { // chain the promise 
      var $inner = $('.inner'); 
      var contWidth = $(".container").width(); 
      var finalWidth = ((contWidth * .25) * -1) + parseInt($(".inner").css("left")); 
      var contWidthC = contWidth * -1; 

      if (finalWidth === contWidthC) { 
       return $inner.animate({ left: "0" }, 200, function() { 
        // put logic to execute when the animation ends here, or remove this if not needed 
       }).promise(); // returns a promise that presumably resolves when animation completes 
      } 
     }); 
    }); 
})(); 

быть честным, хотя, перечитывая вопрос,

1. вы начинаете, говоря вы хотите заблокировать последующие клики,
2. вы заканчиваете вопрос о том, что последующие клики должны ждать завершения анимации

два взаимоисключающие

Этот ответ будет, более или менее, в очереди за клик события, которые будут обрабатываться последовательно один раз предыдущая анимация завершает

Answer 3

Вы можете просто установить флаг. Я выбрал класс css, чтобы вы могли стилизовать кнопку, пока она отключена.

если .cycle-next является элемент формы, вы могли бы пойти с .prop("disabled", true), или набора данных стоимости .data("disabled", true)

$(".cycle-next").on('click',function(){ 
    var $this = $(this); 
    if($this.hasClass("disabled")) return false; 

    var contWidth = $(".container").width(); 
    var finalWidth = ((contWidth*.25)*-1)+(parseInt($(".inner").css("left"))); 
    var contWidthC = contWidth*-1; 

    if(finalWidth === contWidthC){ 
     $this.addClass("disabled"); 
     $(".inner").animate({left:"0"},200,function(){ 
      $this.removeClass("disabled"); 
     }); 
    } 
});