CODEWITHSUNDEEP
javascriptjquery
Mohamed Naguib
Mohamed Naguib

Reputation: 1730

disable keyboard clicks for 3 seconds

I have the following code

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

    });
});

I want to prevent the user from using any key for three seconds after pressing right or left.

so basically he can click left or right and he can't do another action for three seconds before taking another one.

Upvotes: 2

Views: 2169

Answers (2)

Giovanni Filardo
Giovanni Filardo

Reputation: 1022

You could use two different approaches

  1. check if the right amount of time has passed inside the event handler
  2. use an event handler that is itself limited and only works at most once every three seconds.

Since the first one has already been posted and the second one is quite interesting, I'm going to describe it. In the following code there is a throttle function. Its body is extracted from the underscore.js library (http://underscorejs.org/#throttle). This function is a rate-limiting function that takes a function, an integer (the number of seconds to wait before a call and the next one) and returns the rate-limited function. throttle is a quite useful tool in these situations, I suggest you to learn it and use it, so that every time you need to rate-limit an event handler, you keep the limiting logic outside from the event handler and you write clearer and less error-prone code. Here's the code!

$(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;
        };
    };

});

Of course, if you include the underscore.js library you don't need to define the throttle function in your code, and you just use the one included by the library. The keydown line becomes $(document).keydown(_.throttle(keyHandler, 3000, {trailing: false}));

Here's a working fiddle http://jsfiddle.net/n5L3m/ (to use it, you should click on the result panel to focus on it)

Upvotes: 0

sanchez
sanchez

Reputation: 4530

$(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 - Note: You need to click on the result panel first to get focus.

Upvotes: 4

Related Questions