Question

SCENARIO

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

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

问题

动画持续1秒。

在动画的执行持续时，我不希望该功能收听任何输入。

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

我该如何做到这一点？

JS CODE

$(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制作动画（＆＃34;：动画＆＃34;）

$(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()方法可以在函数完成时调用它。您可以使用.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 - 在执行函数时避免听箭头键

3 个答案: