如果同一个按键被多次按下，如何触发不同的功能

Question

我有点纠结于如果按下同一个键，如何触发不同的函数。例如，如果按下空格，它将调用function1。如果再次按下空格键，它将调用function2。如果再调用一次space，它将调用function3。

我目前有以下代码，而且我的代码似乎从未进入最后两个if语句。关于如何解决这个问题，有什么建议吗？提前感谢！

document.addEventListener("keydown", function (e) {
if (e.code == "") {
function1();
if (e.code == "") {
function2();

} 
if (e.code == "") {
function3();

} 
}

Answer 1

JavaScript事件是确保它们在发生事件时触发函数的工具。因此，如果你想添加几个函数，你必须确保发生了一些事情来触发它们。因此，如果你说按下某个键时必须运行几个函数，那么如果你没有将其他函数绑定到该键，那就没有意义了。因为如果你只有一个按键事件，那么你不可能每次按下该按键都会运行多个功能。但是您也可以稍微调整一下代码来运行多个函数。

下面是一个如何做到这一点的例子。

HTML:

<p class='p'>Hello<p>

CSS：

.red{
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}

JS:

let v=0
const p = document.querySelector('.p')
document.body.onkeydown= function (e) {
if (e.keyCode == 32) {
switch(v % 3){
case 0:
p.classList.add('red')
p.classList.remove('green')
p.classList.remove('blue')
v += 1
console.log(v)
break
case 1:
p.classList.add('green')
p.classList.remove('red')
p.classList.remove('blue')
v += 1
break
case 2:
p.classList.add('blue')
p.classList.remove('green')
p.classList.remove('red')
v += 1
break
}
}
}

在这里，你可以看到，我正在确保另一个功能正在隐藏运行，以选择我想要的功能。

Answer 2

由于每个事件都会调用事件处理程序，因此必须使用某种debounce函数。基本上是一个计时器和一些逻辑，用于跟踪事件在给定时间范围内发生的次数。

让我们从一个小助手函数开始，它负责延迟对3个事件处理程序函数的调用。

const debounceKeyPress = (keyCode, ...fns) => {
let noOfOccurrences = -1; // we're starting with -1 here, so we don't need to re-calculate for use with index
let timeout;
return (ev) => {
if (ev.keyCode !== keyCode) {
return;
}
noOfOccurrences += 1;
clearTimeout(timeout);
if (fns[noOfOccurrences]) {
timeout = setTimeout(() => { fns[noOfOccurrences](ev); noOfOccurrences = -1; }, 500);
}
}
}

现在您有了一个通用函数，它包含一个关键代码和许多函数。最后一部分是可变的。因此，您还可以传递4或5个函数。它返回另一个函数，然后您可以将其用作事件侦听器。

const fn1 = (ev) => console.log(`key ${ev.keyCode} was hit once.`);
const fn2 = (ev) => console.log(`key ${ev.keyCode} was hit twice.`);
const fn3 = (ev) => console.log(`key ${ev.keyCode} was hit three times.`);
document.addEventListener('keydown', debounceKeyPress(32, fn1, fn2, fn3));

你可以稍微玩一下setTimeojut函数的时间参数，看看它实际需要多长或短。也可以将其作为辅助函数debounceKeyPress的参数，以获得更大的灵活性。

希望对你有用。

干杯。A.