Я создаю калькулятор ударов в минуту (BPM) в JavaScript, который может запускаться как щелчком, так и нажатием клавиши. При использовании только клавиатуры или только мыши / тачпада все работает нормально. Однако, если я начну нажимать мышью, а затем продолжу работать с клавиатурой в том же темпе, результирующее значение BPM вырастет на 10% или более; если я начну нажимать с клавиатуры и продолжу с помощью мыши, она упадет. Затем он нормализуется после 4 нажатий в футлярах, что заставляет меня думать, что проблема связана с переключением между методами ввода: CodePen
const body = document.querySelector("body"),
tappingButton = document.getElementById("tapping-button"),
result = document.getElementById("result");
var tapTime = [],
firstTap = true;
function calculator() {
let addTap;
let removeTap;
//Skips calculation until there are at least 2 taps:
if (firstTap === true) {
firstTap = false;
addTap = tapTime.unshift(Date.now());
result.innerHTML = "0";
} else {
//Calculates average bpm based on last <= 4 taps:
addTap = tapTime.unshift(Date.now());
if (tapTime.length > 4) {
removeTap = tapTime.pop();
}
let averageBPM = Math.round ((tapTime.length - 1) / (tapTime[0] - tapTime[tapTime.length - 1]) * 60000);
result.innerHTML = averageBPM;
}
}
//Event listeners:
tappingButton.addEventListener("click", calculator, false);
body.addEventListener("keypress", calculator, false);
<body>
<p>Click on the button or press any key to define BPM</p>
<div id = "tapping-button"
style = "width: 100px;
height: 100px;
background-color: green;
box-shadow: 3px 3px 3px grey;">
</div>
<p>Your BPM: </p><p id = "result"></p>
</body>
Я пробовал настраивать таргетинг на разные элементы с помощью прослушивателя событий; похоже, это не имеет никакого значения.
Есть идеи о том, что вызывает различное поведение при переключении и как сделать его согласованным?