Question

在我的网络应用中，我使用 onkeydown 事件来捕获击键。

例如，我捕获'j'键以在页面上向下滚动动画（并同时执行其他操作）。

我的问题是用户可能会将'j'键向下滚动以向下滚动页面（这相当于快速多次击键）。

在我的应用中，这会导致一系列看起来不那么好的动画。

我如何知道密钥何时被释放，并知道我应该捕获的关键笔记的数量？这样我可以运行一个长动画而不是多个短动画。

Answer 1

以@JMD：

为基础

var animate = false;

function startanimation()
{
  animate = true;
  runanimation();
}

function stopanimation()
{
  animate = false;
}

function runanimation()
{
  if ( animation_over )
  {
    if ( !animate )
    {
      return;
    }

    return startanimation();
  }

  // animation code

  var timeout = 25;
  setTimeout(function(){runanimation();},timeout);
}

document.onkeydown = startanimation;
document.onkeyup   = stopanimation;

但是，您需要为开始/结束动画添加一些检查。

编辑：在JS中添加了return;会无休止地递归。

Answer 2

您可以在keyDown上启动动画，而不是尝试叠加动画，如果在动画结束时您尚未收到keyUp，则启动另一个动画。一旦你到达动画的结尾并且做有keyUp，那么你就完成了。

Answer 3

您可以尝试使用我的repsonsiveness插件，请参阅： http://notetodogself.blogspot.com/2008/12/jquery-responsiveness-plugin-for-fast.html

在此处查看演示： http://doesthatevencompile.com/current-projects/jquery.responsiveness/

快速输入东西的那个。你可以根据自己的需要进行调整。像这样：动画事件将与插件绑定，并在用户停止快速执行时执行。你可以通过正常的事件绑定来计算他做多少次快速的事情。

Answer 4

setTimeout返回计时器ID。所以我要做的是在收到keyDown事件后，我会启动一个等待时间很短的计时器，如下所示：

var globalTimerId = -1;
var keyDownCount = 0;

function handleKeyDown(e) {
    if (globalTimerId != -1) {
        clearTimeout(globalTimerId);
        keyDownCount++;
    }

    /* 500 means 1/2 a second, adjust for your needs */
    globalTimerId = setTimeout(handleKeyDownAfterWait, 500);
    keyDownCount = 1;
}

function handleKeyDownAfterWait() {
    globalTimerId = -1;
    /* keyDownCount will have the number of times handleKeyDown was called */
}

所以我的想法是每次收到keyDown事件时，清除计时器（假设它还没有过去）并重新启动。如果计时器到期，则用户放开密钥，您可以在handleKeyDownAfterWait处理。

然而，jQuery或其他JS库可能还有其他更优雅的解决方案。这只是快速和肮脏的东西（可能是马车;））

捕获多个“onkeydown”并等待“onkeyup”执行

4 个答案: