jquery - 如何使用 jQuery 确保函数在再次执行同一函数之前完成？

Question

所以，我有一个在 .click() 事件上执行的函数。我想知道如何确保该函数在第一次运行完成之前不会再次运行？因此，如果用户单击 3 次，该函数将运行 3 次，但 run1 将在 run2 开始之前完成。

我正在考虑类似 .queue() 的东西，但不确定如何实现它。

$(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>

抱歉，如果这篇文章太大了，之前没有使用过 Stack Overflow，这是我第一次真正尝试使用 jQuery。

如果需要的话可以添加CSS...

Answer 1

问题是动画的每次迭代都在新元素上。然后元素 ID 被更改，动画被放入新元素的队列中。因此，您会遇到这样的情况:新元素在前一个动画完成之前在其队列中启动动画。 JavaScript/jQuery 不会在动画期间停止脚本的执行。

为此，jQuery 在 .animate() 方法中提供了一个回调参数。回调在动画完成后执行。我试图利用这一点来强制以所需的方式执行。

解决方案:

这仍然使用我在下面提供的解决方案，只是以稍微不同的方式实现。

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

我使用了一个命名函数，以便更轻松地回调 doAnimate() 函数。

以下上一篇文章:

<小时/>

递归和一些 bool 逻辑将完全满足您的要求。

试试这个:

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

• 每当动画运行时，队列都会增加 1。
• 任何时候queue不是0，递减queue，然后
• arguments.callee() 将调用您的匿名函数(这是递归)。就像使用 $(this) 一样，用于调用函数。