Как проверить нажатие клавиши несколько раз в js?
Я пытаюсь создать таймер кубирования. Когда я нажимаю и удерживаю пробел, таймер должен стать зеленым. Когда я отпускаю, таймер должен начать работать. При повторном нажатии таймер должен остановиться. А потом все это должно повториться.
Мне нужно проверить, если:
- Пробел был нажат.
- Пробел был отпущен.
- Пробел был снова нажат.
У меня есть этот код:
var down = false;
document.addEventListener('keydown', function () {
if (event.code === 'Space') {
if (down) return;
down = true;
console.info('Waiting...')
}
}, false);
document.addEventListener('keyup', function () {
if (event.code === 'Space') {
down = false;
console.info('Start')
}
}, false);
// I need some Stop function here
Проблема в том, что когда я нажимаю пробел, а затем отпускаю и снова нажимаю, он выполняет 4 функции. Но мне нужно запустить 3 разных. И тогда я должен быть в состоянии сделать то же самое снова.
Как я могу это сделать?
Я пытаюсь создать таймер кубирования. Когда я нажимаю и удерживаю пробел, таймер должен стать зеленым. Когда я отпускаю, таймер должен начать работать. При повторном нажатии таймер должен остановиться. А потом все это должно повториться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать KeyboardEvent::repeat, чтобы проверить, есть ли у вас первое событие нажатия клавиши:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
Также обратите внимание, что window.event устарел:
https://developer.mozilla.org/en-US/docs/Web/API/Window/event
Таким образом, логика состоит в том, чтобы использовать автоматы с конечным состоянием и переключаться между состояниями при нажатии клавиш. Когда состояние изменяется, вызывается функция из объекта transitions - поместите туда свою логику для выполнения при изменении состояния:
let state = 'stopped';
const transitions = {
waiting: state => console.info(state),
started: state => console.info(state),
stopped: state => console.info(state),
};
document.addEventListener('keydown', changeState);
document.addEventListener('keyup', changeState);
function changeState({code, repeat, type: action}){
if (code !== 'Space' || repeat){
return;
}
// this allows to have more event types and states in the future without cluttering
const actions = {
keydown: () => state === 'stopped' ? 'waiting' : 'stopped',
keyup: () => state === 'stopped' ? state : 'started',
};
// determine the next state
const next = actions[action]();
// if the next state is different, commit it to the current and execute transition
next === state || transitions[state = next](state);
}Он делает то же самое на самом деле. Поясню по-другому: мне нужно 3 функции. Один для режима ожидания. Второй для запуска какой-то функции (Пуск). Третий для остановки функции. Когда я нажимаю один раз, запускается первая функция. Когда я отпускаю, запускается функция Start. При повторном нажатии запускается функция Stop. Вы можете помочь с этим?
@TimurArazmedov исправлено и улучшено
Большое спасибо! Но как я могу вставить свои функции?
@TimurArazmedov удалил лишнее if. вы также можете проголосовать за мой ответ (стрелка вверх), чтобы я был вознагражден дополнительными 10 баллами и мотивирован помочь вам в будущем, спасибо
@TimurArazmedov добавил transitions объект, куда вы можете поместить свои функции
Большое спасибо!
@TimurArazmedov улучшил код, позволяющий иметь логику состояния без ifs. он мог бы быть более сложным для понимания, но более лаконичным и гибким
Не могли бы вы уточнить, что вы пытаетесь сделать, что ожидаете увидеть и что видите на самом деле?