Question

我在jQuery中有一个函数，只要按下任何箭头键就会触发它。以下是'up'箭头案例的代码，其他三种案例看起来非常相似，并且包含在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();
        }

如何处理这些事件，以便当我按下一堆箭头键时，每次执行该函数只会在上一次函数调用完成后完成？

Answer 1

许多方法都可以做到这一点。一种方法是将它们添加到队列中，此队列一次只能执行此操作。在每个函数中，当它完成后将其取消，以便下一个函数可以运行。您可以使用jquery的队列函数：http://api.jquery.com/jquery.queue/

Answer 2

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

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，如果新参数启动，则它将变为4，并且当所有动画完成时，它将仅返回值0。一旦为0，keyCheck将继续工作。

防止执行jQuery函数直到当前的jQuery函数完成

2 个答案: