jQuery

Question

场景

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

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

问题

动画持续1秒。

我不希望函数在动画执行期间侦听任何输入。

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

我怎样才能做到这一点？

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;

  });

});

Answer 1

按下按键时设置标志，在动画结束时重置标志：

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

Answer 2

检查您是否已经在使用 .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;
  });
});

Answer 3

.animate() method can call a function when it is completed. You could remove the event handler using .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();

});

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

jQuery - avoid listening to arrow keys while function is executing

html

javascript

frontend

keydown