How do I add a delay/timeout to jQuery keypress function

Question

This is the code I'm using now to move a multi-layer carousel (left right up down) but I need to add a timeout function for say 5000 so the animation has time to complete before the next click is triggered.

function checkKey(e){

       switch (e.keyCode) {
          case 40:
              //alert("down");
              $("#down").trigger("click");
              break;
          case 38:
              //alert("up");
              $("#up").trigger("click");
              break;
          case 37:
              //alert("left");
              $("#left").trigger("click");
              break;
          case 39:
              //alert("right");
              $("#right").trigger("click");
              break;  
              }      
      }

     // Call checkKey on key press
     if ($.browser.mozilla) {
         $(document).keypress(checkKey);
     } else {
         $(document).keydown(checkKey);
     }

UPDATE:

I ended up finding a solution. I know there is probably a much cleaner way to do this but I don't know how so forgive my messiness.

// Set Time variable
   var checkTime = 0;

   // Call checkKey on key press
   if ($.browser.mozilla) {
       $(document.documentElement).keypress(function (event) {

          // set variable to current time
          var currentTime = new Date()
          // See if Now's current time is 400 past the old current time
          if((currentTime.getTime() - checkTime) > 400){

                // If so then fire the triggers.
                // Using if seemed to limit the inputs to a single keystroke        
                if (event.keyCode == 40) {
                        $("#down").trigger("click");
                } else if (event.keyCode == 38) {
                        $("#up").trigger("click");
                } else if (event.keyCode == 37) {
                        $("#left").trigger("click");
                } else if (event.keyCode == 39) {
                        $("#right").trigger("click");
                }
              // Reset current time.
              checkTime =currentTime.getTime();
          }


        });
   } else {
       $(document.documentElement).keydown(function (event) {

          // set variable to current time
          var currentTime = new Date()
          // See if Now's current time is 400 past the old current time
          if((currentTime.getTime() - checkTime) > 400){

                // If so then fire the triggers.
                // Using if seemed to limit the inputs to a single keystroke        
                if (event.keyCode == 40) {
                        $("#down").trigger("click");
                } else if (event.keyCode == 38) {
                        $("#up").trigger("click");
                } else if (event.keyCode == 37) {
                        $("#left").trigger("click");
                } else if (event.keyCode == 39) {
                        $("#right").trigger("click");
                }
              // Reset current time.
              checkTime =currentTime.getTime();
          }


        });
   }

This is going to annoy users ... they press a key and wont get the expected result - why not use stop() to complete the animation and start the next ? — Manse
– Manse, Commented Mar 29, 2012 at 15:47
I would go more toward a delay than a "lock", as it would be easier to implement and because it would seriously annoy me if I was trying to jump ahead 3 pictures and had to wait for each turn before the next keypress. — Anthony
– Anthony, Commented Mar 29, 2012 at 15:48
I guess the issue is that I'm moving around an .active (ul.active) and .active-li (ul.active li.active-li) to track the current slide's position. And it's a combination bumping those closes around and at some point if the users taps the arrows too quickly it gets ahead of itself. — Ethan Hackett
– Ethan Hackett, Commented Mar 29, 2012 at 15:57

COLD TOLD · Accepted Answer · 2012-03-29 15:51:56Z

1

try using delay function from the jquery library here is the tutorial url http://api.jquery.com/delay/

it probably would be something like this.

 $("#down").delay(5000).trigger("click");

answered Mar 29, 2012 at 15:51

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ethan Hackett Over a year ago

Should that replace this - $("#down").trigger("click");

Cris Kim · Accepted Answer · 2012-03-29 15:50:18Z

0

This should do the trick:

setTimeout(function() { 
   $("#right").trigger("click");
}, 5000);

answered Mar 29, 2012 at 15:50

Cris Kim

133 bronze badges

1 Comment

random_user_name Over a year ago

More context. Where does this go? What event is it bound to?

Collectives™ on Stack Overflow

How do I add a delay/timeout to jQuery keypress function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related