禁用键盘点击3秒钟

disable keyboard clicks for 3 seconds

本文关键字：3秒钟 键盘      更新时间：2023-12-31

我有以下代码

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

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

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

$(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-注意：您需要首先单击结果面板才能获得焦点。

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

  1. 检查事件内部是否经过了适当的时间处理程序
  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函数，只需使用库中包含的函数即可。键控线变为$(document).keydown(_.throttle(keyHandler, 3000, {trailing: false}));

这是一把正在工作的小提琴http://jsfiddle.net/n5L3m/（要使用它，您应该点击结果面板来关注它）

相关文章：