防止 jQuery 函数在当前函数完成之前执行答案

【问题标题】：Preventing a jQuery function from being executed until current one is finished防止 jQuery 函数在当前函数完成之前执行
【发布时间】：2015-07-25 02:15:09
【问题描述】：

我在 jQuery 中有一个函数，每当我按下任何箭头键时都会触发该函数。以下是“向上”箭头案例的代码，其他三个案例看起来非常相似，都包含在 checkKey 函数中。

document.onkeydown = checkKey;

    function checkKey(e) {
        var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
        e = e || window.event;

        if (e.keyCode == '38') {
            for (i = 0; i < divs.length; i++){
                var tmp = document.getElementById(divs[i]);
                var coord = $(tmp).position();
                if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){
                    if(embargo_top < coord.top){
                        embargo_top = coord.top;
                        embargo_left = coord.left;
                        $(tmp).animate({
                            'top': (parseInt($(tmp).css('top'), 10) - 100) + "px"
                        }, 500);
                        break;
                    }
                }
            }
            checkIfWinner();
        }

如何处理这些事件，以便如果我将一堆箭头键组合在一起，则每次执行函数都只会在前一个函数调用完全完成后发生？

【问题讨论】：

stackoverflow.com/questions/7373023/…

标签： javascript jquery

【解决方案1】：

有很多方法可以做到这一点。一种方法是将它们添加到队列中，该队列一次只能做一件事。在每个函数中，完成后将其出列，以便下一个函数可以运行。您可以使用 jquery 的队列功能：http://api.jquery.com/jquery.queue/

【讨论】：

【解决方案2】：

您似乎正在为多个对象设置动画，并且您希望在所有动画停止之前避免任何键输入。尝试以下更改（箭头 ==> 突出显示）：

document.onkeydown = checkKey;

==> var animationStillGoing = 0;

    function checkKey(e) {
        var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
        e = e || window.event;

==>         if (animationStillGoing>0) {return}

        if (e.keyCode == '38') {
            for (i = 0; i < divs.length; i++){
                var tmp = document.getElementById(divs[i]);
                var coord = $(tmp).position();
                if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){
                    if(embargo_top < coord.top){
                        embargo_top = coord.top;
                        embargo_left = coord.left;

                        animationStillGoing++;

                        $(tmp).animate({
                            'top': (parseInt($(tmp).css('top'), 10) - 100) + "px"
==>                           }, 500,function(){animationStillGoing--;});
                        break;
                    }
                }
            }
            checkIfWinner();
        }

这些更改的作用是让一个全局变量跟踪正在进行的动画。此值从 0 开始，如果此值 >0，keyCheck 函数将返回。
animationStillGoing 将在动画开始前增加，并在动画结束时减少。所以，如果还有3个动画还在进行，这个参数就会是3，如果有新的开始，它会变成4，只有当所有的动画完成后它才会返回0。一旦为 0，keyCheck 将继续工作。

【讨论】：