如何阻止javascript函数调用直到完成

Question

how to block click events to invoke function till this function completed , i have written this function :

 $(".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(){ }); } }); 

here once we click on (cycle-next) element , the function start executing , suppose the controller in the middle of function , at this point user again click on the element for second time , again the controller start from the beginning of function without completing , How to make second click wait until completing ?

Answer 1

Using .promise() and $.when() (and an IIFE) should do the trick

;(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
            }
        });
    });
})();

To be honest though, re-reading the question,

1. you start by saying you want to block subsequent clicks,
2. you end the question saying that subsequent clicks should wait for the animation to complete

the two are mutually exclusive

This answer will, more or less, queue the click events to be processed sequentially once the previous animation completes

Answer 2

You can simply set a flag. I chose a css class so you can style the buttonwhile it is disabled.

if .cycle-next is a form-element, you could go with .prop("disabled", true) , or with a dataset-value .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");
        });
    }
});

Answer 3

Try to use an AJAX call on click to disable the button and on success of the AJAX call enable the button again. This is a consistent solution