jQuery - 在执行函数时避免听箭头键

SCENARIO

情景

I have developed a function with jQuery which listens to the user's keyboard (based on the keydown() method).

我用jQuery开发了一个函数，它监听用户的键盘（基于keydown（）方法）。

I analyze the user's input with evt.keyCode, and if the down or up arrow keys are pressed, then an animated smooth scroll is executed.

我用evt.keyCode分析用户的输入，如果按下向下或向上箭头键，则执行动画平滑滚动。

PROBLEM

问题

The animation lasts 1 second.

动画持续1秒。

I don't want the function to listen to any input while the execution of the animations lasts.

我不希望函数在动画的执行持续时收听任何输入。

That is, if the user presses several times the down and up arrow keys in 1 second, only the first one should be taken into account, and until the execution time (1 second) is over, the rest of the keystrokes should be discarded.

也就是说，如果用户在1秒内按下向下和向上箭头键几次，则只应考虑第一个，并且直到执行时间（1秒）结束，其余的击键应该被丢弃。

How can I accomplish this?

我怎么能做到这一点？

JS CODE

JS代码

$(function () { 

  $(document).keydown(function (evt) {

    if (evt.keyCode == 40) {

                $('html,body').animate({scrollTop: 50}, 1000);

    } else if (evt.keyCode == 38) {

                $('html,body').animate({scrollTop: 0}, 1000);

    }

    return false;

  });

});

3 个解决方案

#1

Check to see if you're already animating using .is(":animated")

检查你是否已经使用.is（“：animated”）制作动画

$(function () { 
  $(document).keydown(function (evt) {
    if ($('html,body').is(":animated")){
        return false;
    }
    if (evt.keyCode == 40) {
                $('html,body').animate({scrollTop: 50}, 1000);
    } else if (evt.keyCode == 38) {
                $('html,body').animate({scrollTop: 0}, 1000);
    }
    return false;
  });
});

#2

Set a flag when a key is pressed, reset the flag at the end of the animation:

按下某个键时设置一个标志，重置动画结束时的标志：

var isAnimating = false;
$(document).keydown(function (evt) {
    if (isAnimating == false) {
        isAnimating = true;
    } else {
        return;
    }
    if (evt.keyCode == 40) {

            $('html,body').animate({scrollTop: 50}, 1000, function() {
                isAnimating = false;
            });

    } else if (evt.keyCode == 38) {

            $('html,body').animate({scrollTop: 0}, 1000, function() {
                isAnimating = false;
            });

    }

    return false;
});

#3

The .animate() method can call a function when it is completed. You could remove the event handler using .off(), then re-add it when the animation is complete.

.animate（）方法可以在函数完成时调用它。您可以使用.off（）删除事件处理程序，然后在动画完成时重新添加它。

$(function () { 

    function attachOnKeydown() {
        $(document).on('keydown', onKeydown);
    }

    function onKeydown(evt) {

        // Detach onKeyDown()
        $(document).off('keydown', onKeydown);

        if (evt.keyCode == 40) {

            $('html,body').animate({scrollTop: 50}, 1000, attachOnKeydown);

        } else if (evt.keyCode == 38) {

            $('html,body').animate({scrollTop: 0}, 1000, attachOnKeydown);

        }

        return false;

    }

    attachOnKeydown();

});

#1