How do I ensure with jQuery that a function will finish before executing the same function again?

Question

So, I have a function that executes on a .click() event. I want to know how I can ensure that the function won't run again before the first run is complete? So, if a user clicks 3 times, the function will run 3 times, but run1 will finish before run2 starts.

I was thinking something like .queue(), but am unsure how to implement it.

$(document).ready(function(){

    var numTabs = 10;
    var lastTab = numTabs;
    var currentClass;
    var newClass;

    // Portfolio Gallery

    $('.leftArrow').click(function () {
        $(this).queue(function () {
            // Moves Main 1-5 across
            for (i=1;i<=4;i++) {
                $('#main'+i).animate({'left': '+=229px'}, 'slow');
                $('#main'+i).removeAttr('style');
            }
            $('#main5').removeAttr('style');

            // Removes the Main Classes
            for (i=1;i<=5;i++) {
                $('#main'+i).removeClass('main'+i);
            }

            // Removes the active class from Main3
            $('#main3').removeClass('active');

            // Sets the New Main 1-5 IDs
            for (i=1;i<=5;i++) {
                currentClass = $('#main'+i).attr('class');
                currentClass = currentClass.substr(2);
                newClass = currentClass - 1;
                if (newClass == 0) {
                    newClass = lastTab;
                }
                $('.ex'+newClass).attr('id', 'main'+i);
            }

            // Sends Old Main 5 to the Stack
            if (newClass == lastTab) {
                newClass = 0;
            }
            $('.ex'+(newClass + 1)).removeAttr('id').addClass('theStack');

            // Reassigns the Main CLASSes
            for (i=1;i<=5;i++) {
                $('#main'+i).addClass('main'+i);
            }

            // Moves New Main 1 from Stack to Main 1 position
            $('#main1').removeClass('theStack');

            //Sets Main 3 as the new focus
            $('#main3').addClass('active');

            $(this).dequeue();
        });
    });
});


<div class="pMainHide">
    <div class="pMainShow">
        <div class="ex1 active main3" id="main3"><a href="images/image1.jpg">Image1</a></div>
        <div class="ex2 main4" id="main4"><a href="images/image2.jpg">Image2</a></div>
        <div class="ex3 main5" id="main5"><a href="images/image3.jpg">Image3</a></div>
        <div class="ex4 theStack"><a href="images/image4.jpg">Image4</a></div>
        <div class="ex5 theStack"><a href="images/image5.jpg">Image5</a></div>
        <div class="ex6 theStack"><a href="images/image6.jpg">Image6</a></div>
        <div class="ex7 theStack"><a href="images/image7.jpg">Image7</a></div>
        <div class="ex8 theStack"><a href="images/image8.jpg">Image8</a></div>
        <div class="ex9 main1" id="main1"><a href="images/image9.jpg">Image9</a></div>
        <div class="ex10 main2" id="main2"><a href="images/image10.jpg">Image10</a></div>
    </div>
</div>

Sorry if this is too big a post, haven't used Stack Overflow before, and this is my first real attempt at using jQuery.

CSS can be added if needed...

Answer 1

maybe this can help you...

var executing = false;
$('.leftArrow').click(function () {
    if (!executing) {
      executing = true;
      // Execute animation and what not here.
      executing = false;
    } else {
      // just wait?
    }
});

Answer 2

It's on you. You should create some boolean logic or, disable / enable the button.

var block = false;
$('.leftArrow').click(function(){
    if(!block){
        block = true;
        // do lots of stuff
        block = false;            
    }
});

It's probably even better to use a callback from an animation method (in jQuery). Like

$('.leftArrow').click(function(){
    var $this = $(this);

    $this.attr('disabled', 'disabled');
    $('somelement').fadeOut('slow', function(){
       $this.removeAttr('disabled');    
    });
});

Answer 3

The issue is that each iteration of the animation is on new element. Then the element IDs are changed and the the animation is put in the queue of the new elements. So you run in to a situation where the new elements start the animation in their queue before the previous animation is done. JavaScript/jQuery does not halt the execution of the script during the animation.

For this, jQuery provides a callback parameter in the .animate() method. The callback is executed after the animation is complete. I tried to take advantage of this to force execution in the desired fashion.

The solution:

This still uses the solution I provided below, just implemented in a slightly different way.

$(document).ready(function(){
var numTabs = 10;        
var lastTab = numTabs;        
var currentClass;        
var newClass;        
var count = 0; // counter for myCallback
var executing = false;
var myQueue = 0;    
// Portfolio Gallery        

$('.leftArrow').click(doAnimate); // call a named function

function doAnimate(){
    if(!executing){
        executing = true;         
        // Moves Main 1-5 across  <- you are only moving 1-4 here      
        for (i=1;i<=4;i++) {                    // Add Callback--v    
            $('#main'+i).animate({'left': '+=229px'}, 'slow', myCallback);       
            $('#main'+i).removeAttr('style');        
        }        
        $('#main5').removeAttr('style');        

        // Removes the Main Classes        
        for (i=1;i<=5;i++) {        
            $('#main'+i).removeClass('main'+i);        
        }        

        // Removes the active class from Main3        
        $('#main3').removeClass('active');        

        // Sets the New Main 1-5 IDs        
        for (i=1;i<=5;i++) {        
            currentClass = $('#main'+i).attr('class');        
            currentClass = currentClass.substr(2);        
            newClass = currentClass - 1;        
            if (newClass == 0) {        
                newClass = lastTab;        
            }        
            $('.ex'+newClass).attr('id', 'main'+i);        
        }        

        // Sends Old Main 5 to the Stack        
        if (newClass == lastTab) {        
            newClass = 0;        
        }        
        $('.ex'+(newClass + 1)).removeAttr('id').addClass('theStack');        

        // Reassigns the Main CLASSes        
        for (i=1;i<=5;i++) {        
            $('#main'+i).addClass('main'+i);        
        }        

        // Moves New Main 1 from Stack to Main 1 position        
        $('#main1').removeClass('theStack');        

        //Sets Main 3 as the new focus        
        $('#main3').addClass('active');        

    } else {
        myQueue++;
    }   
}
function myCallback(){
    count++;
    if(count == 4){ // needs to be the same as your animate for loop
        count = 0;
        executing = false;
        if(myQueue == 0) return;
        myQueue--;
        doAnimate();
    }
}
});           

I went with a named function to make it easier to make a call back to the doAnimate() function.

Previous post below:

---

Recursion and some boolean logic will accomplish exactly what you are asking.

Try this:

var queue = 0;
var executing = false; 

$('.leftArrow').click(function () { 
    if (!executing) { 
        executing = true; 
        // Animation 
        executing = false;
        if(queue == 0) return;
        queue--;
        arguments.callee();
    } else { 
        queue++;
    } 
}); 

• Anytime your animation is running, queue will increment by 1.
• Anytime queue is not 0, decrement queue, then
• arguments.callee() will call your anonymous function (this is recursion). Like using $(this), for calling functions.

And don't forget:

To understand recursion, you must first understand recursion.