如何向 jQuery 按键功能添加延迟/超时答案

【问题标题】：How do I add a delay/timeout to jQuery keypress function如何向 jQuery 按键功能添加延迟/超时
【发布时间】：2012-03-29 15:44:08
【问题描述】：

这是我现在用来移动多层轮播的代码（左上右下），但我需要为 5000 添加超时功能，以便在触发下一次点击之前动画有时间完成。

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);
     }

更新：

我最终找到了解决方案。我知道可能有一种更清洁的方法可以做到这一点，但我不知道如何原谅我的混乱。

// 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();
          }


        });
   }

【问题讨论】：

这会惹恼用户......他们按下一个键并不会得到预期的结果 - 为什么不使用stop()完成动画并开始下一个？
我更倾向于延迟而不是“锁定”，因为它更容易实现，而且如果我试图向前跳 3 张图片并且必须等待每张图片，它会严重困扰我在下一次按键之前转动。
我想问题是我正在移动 .active (ul.active) 和 .active-li (ul.active li.active-li) 以跟踪当前幻灯片的位置。这是一个组合，如果用户点击箭头太快，它就会超越自己。

标签： jquery timeout keypress

【解决方案1】：

尝试使用 jquery 库中的延迟函数，这里是教程 url http://api.jquery.com/delay/

可能是这样的。

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

【讨论】：

应该替换这个 - $("#down").trigger("click");

【解决方案2】：

这应该可以解决问题：

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

【讨论】：

更多上下文。这要去哪里？它绑定到什么事件？