如何在js中创建带有键盘事件的计数定时器

Question

我正在创建一个程序，当我点击"keyup"当我按下按键时它就停止了当我按下按键时重置计时器下次。

const Timer = () => {
const [timer, setTimer] = useState(0);
let state = 0;
let isFired = false;
const increment = useRef(null);
useEffect(() => {
window.addEventListener('keydown', (e) => {
if (isFired) {
if (e.code === 'Space' && state === 2) {
e.stopPropagation();
isFired = false;
handleReset();
}
if (e.code === 'Space' && state === 1) {
clearInterval(increment.current);
state = 2;
}
}
});
window.addEventListener('keyup', (e) => {
if (!isFired) {
if (e.code === 'Space' && state === 0) {
isFired = true;
state = 1;
handleStart();
}
}
});
return () => {
window.removeEventListener('keydown', handleReset);
window.removeEventListener('keyup', handleStart);
};
}, []);
const handleStart = () => {
increment.current = setInterval(() => {
// DON'T COPY THIS BIT
setTimer((timer) => timer + 10);
}, 10);
};
const handleReset = () => {
clearInterval(increment.current);
setTimer(0);
state = 0;
};
// DON'T COPY THIS BIT
const formatTime = () => {
console.log(timer);
const getMilliSeconds = `0${timer % 60}`.slice(-2);
const seconds = `${Math.floor(timer / 60)}`;
const getSeconds = `0${seconds % 60}`.slice(-2);
const getMinutes = `0${Math.floor(timer / 3600)}`.slice(-2);
// return `${getHours} : ${getMinutes} : ${getSeconds}`;
if (getMinutes === '00') {
return `${getSeconds}.${getMilliSeconds}`;
} else {
return `${getMinutes} : ${getSeconds} : ${getMilliSeconds} `;
}
};
// const formatTime = () => {
//   // const milliSeconds = `0${}`;
//   const seconds = `0${Math.floor(timer / 100)}`;
//   const minute = `0${Math.floor(timer / 3600)}`.slice(-2);
//   return `${minute}.${seconds}`;
// };
return (
<div className="Timer">
<h1>{formatTime()}</h1>
</div>
);
};

我已经试过了大多数时候都很好用，但有时会出故障我知道时间格式不对，增量也不对。有时它停在"键下"上;并触发' keyup ';在同一笔划中使计时器从0开始重置我不知道它是否在同一笔划中触发了keyup但似乎确实如此

这是到目前为止我所做的事情的链接timer

Answer 1

我检查了你的代码，发现需要修改的地方太多了。

1. 您只使用state和isFired作为变量，但您需要在重新渲染时保留它们的值。因此，这些必须是状态。
2. 您没有解除绑定在keyup和keydown上绑定的相同侦听器。
3. 根据你当前的代码，你的计时器将在第一个keyup开始，然后下一个keydown，它将停止在它原来的地方。现在，在下一个keydown，它将重置为0，然后在keyup，计时器将再次从0开始。

我修改了你的代码，看到这里的工作变化，

https://codesandbox.io/s/xenodochial-shannon-im8zt?file=/src/App.js