Question

我有以下代码

$(document).ready(function(){
    $(document).keydown(function(e){
        if (e.keyCode == 37) {
               // do something
        }
        else if(e.keyCode == 39){
          // d something
        }

    });
});

我想阻止用户在向右或向左按下三秒后使用任何键。

所以基本上他可以向左或向右单击，在再拿一个之前他不能做三秒钟的其他动作。

Answer 1

$(document).ready(function(){

    //keep keyboard locked/unlocked state in a variable
    var locked = false;

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

        // if keyboard is locked: exit keydown handler
        if( locked ){
           return; 
        }

        // lock keyboard input
        locked = true; 

        //you could use switch statement instead of if-else if 
        switch( e.keyCode ){
            case 37:
               // do something
               break;
            case 39:
               // do something
               break;
        }

        // unlock keyboard input after 3 seconds
        setTimeout( function(){ locked = false; },3000); 

    });
});

JSFIDDLE - 注意：您需要先点击结果面板才能获得焦点。

Answer 2

您可以使用两种不同的方法

检查活动内是否已经过了适当的时间处理
使用仅限于此的事件处理程序每三秒最多工作一次。

由于第一个已经发布，第二个非常有趣，我将描述它。在以下代码中，有一个throttle函数。它的主体是从underscore.js库中提取的（http://underscorejs.org/#throttle）。此函数是一个速率限制函数，它接受一个函数，一个整数（在调用之前等待的秒数和下一个函数）并返回速率限制函数。 throttle在这些情况下是一个非常有用的工具，我建议你学习并使用它，这样每次你需要对事件处理程序进行速率限制时，你将限制逻辑保留在事件处理程序外面写清楚，不易出错的代码。这是代码！

$(document).ready(function() {

    var keyHandler = function(e) {
        if (e.keyCode == 37) {
            console.log('left');
        } else if (e.keyCode == 39) {
            console.log('right');
        }
    }

    $(document).keydown(throttle(keyHandler, 3000, {trailing: false}));

    function throttle(func, wait, options) {
        var context, args, result;
        var timeout = null;
        var previous = 0;
        options || (options = {});
        var later = function() {
            previous = options.leading === false ? 0 : new Date;
            timeout = null;
            result = func.apply(context, args);
        };
        return function() {
            var now = new Date;
            if (!previous && options.leading === false) previous = now;
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0) {
                clearTimeout(timeout);
                timeout = null;
                previous = now;
                result = func.apply(context, args);
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        };
    };

});

当然，如果包含underscore.js库，则无需在代码中定义throttle函数，只需使用库中包含的函数即可。 keydown行变为$(document).keydown(_.throttle(keyHandler, 3000, {trailing: false}));

这是一个工作小提琴http://jsfiddle.net/n5L3m/（要使用它，你应该点击结果面板来专注于它）

禁用键盘点击3秒钟

2 个答案: