如果一个键被按下 500 毫秒触发一个功能 [重复]

Question

在 JQuery 中我知道有一个名为 keydown 的函数，但这确实允许我在每次调用回调时设置超时。

$(document).keydown(() => {
  //do stuff
});

//do stuff 每次调用都太快了。我想在用户持有密钥时每 500 毫秒调用一次。有没有办法做到这一点？

Answer 1

我不确定这是否是最好的方法，但这会解决你的问题

var pressedAt = 0
var timeStep = 500 // 500 ms

function checkKey(e) {
 if(pressedAt == 0) {
  pressedAt = Date.now() 
 }
 if (Date.now() - pressedAt >= timeStep) {
  console.log("Key Pressed");
  pressedAt = 0
 }
}

document.addEventListener("keydown", checkKey);
document.addEventListener("keyup", function(){
  pressedAt = 0
  console.clear()
});

Answer 2

我不熟悉 JQuery，但是...

这是一个结果与其他答案略有不同的解决方案。

500ms 计时器不依赖于按键。

let isAHeld = false;
$(document).keydown((event) => {
  if (event.key === 'a') {
    isAHeld = true;
  }
});
$(document).keyup((event) => {
  if (event.key === 'a') {
    isAHeld = false;
  }
});
$(document).ready(() => {
  setInterval(() => {
    const result = $("#result")[0];
    if (result && isAHeld) {
      result.innerHTML += " A!";
    }
  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Click here to give focus, then press and hold "a".</div>
<div id="result">Output:</div>

Answer 3

这就是你要找的吗？ （我在这个例子中使用了一个按钮）

const button = document.querySelector('#press');
let interval;

button.onmousedown = () => {
  interval = setInterval(() => {
    console.log('every 500ms');
  }, 500);
}

button.onmouseup = () => {
   clearInterval(interval);
}

当用户按下按钮并保持按下状态时，消息将每 500 毫秒记录到控制台。当用户不再按下按钮时，控制台日志记录将停止。

更新：此方法不适用于 keydown 事件，仅适用于鼠标。我相信@Ahmet Zeybek 有正确的答案。

Answer 4

如果您想每 500 毫秒在用户按住键时调用一次操作，请尝试以下 sn-p。

请记住，对于“空格”、字母等某些键，keydown 事件将被调用多次，直到您停止按下该键，但对于“strg”或“ cmd" keydown 事件将被调用一次。这种方法应该适合这两种情况。

var timer1 = null;
var time = 500;


$(document).on('keydown', function() {

  //console.log('keydown has been called');

  // init once, because for some keys (e.g. space, letters, etc.) 
  // this handler will be called consistently while you press the button.
  // some other buttons like "strg", "cmd", etc. will be called once only
  if (timer1 === null) {

    // now from exec each 500ms
    timer1 = setInterval(function() {

      $('body').append('<div>I will be called each 500ms</div>')
    }, time);
  }
});

$(document).on('keyup', function() {

  clearInterval(timer1);
  timer1 = null;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click me to get focus and then press a key for 500ms or longer.</p>

这里是小提琴：https://jsfiddle.net/8Lzwupvo/

还有一个初始延迟 500 毫秒的小提琴：https://jsfiddle.net/92mLx7kj/1/