javascript - 如何在普通js中检测按键之间的间隔

Question

我尝试用以下方法检测 div 上按键之间的间隔:

window.onload = function() {
var p = document.getElementById('input');
    p.addEventListener('keydown', function() {

        if (document.querySelector('.rps')) {
            p.removeAttribute('class')
            clearInterval('me')
        }

        if (!document.querySelector('.rps')) {
            p.setAttribute('class', 'rps')
            var me = setInterval('interval()', 10)
        }

    }, false)

}
var z = 0;
function interval() {
    z += 1
document.getElementById('isp').innerHTML = z;
}

HTML:

测试

问题是，这将在第一次按键时启动 interval()，但它不会删除确定是否启动所需的类 rps或结束setInterval。

该解决方案应该采用纯 JS 格式 - 并且适用于多个按键。

Answer 1

不要使用setInterval。这是为了每 n 毫秒执行一些操作。

您只想在按下某个键时执行某些操作。

将 keydown 事件处理程序绑定(bind)到环境(或者如果您想限制它，则仅绑定(bind)到您感兴趣的元素)。

在该处理程序内，创建一个 new Date() 并将其存储在局部变量中。

在事件处理程序范围之外的特定变量中存在:比较它们的时间。 (除了第一次之外的每次按键都会发生这种情况)。

将局部变量的值复制到更广泛范围内的变量值上。

function createHandler() {
  var last_keydown_time;
  
  function keydown_handler(event) {
    var this_keydown_time = new Date();
    if (last_keydown_time) {
      console.log(this_keydown_time - last_keydown_time);
    }
    last_keydown_time = this_keydown_time;
  }
  
  return keydown_handler;
}

addEventListener('keydown', createHandler());

<input />