'.blur() causes my stopwatch to lag pretty significantly
Hi I have a stopwatch here that works pretty great except that I wanted to add .blur() method to the buttons so that when I click them, the space bar doesn't re-trigger a button when it is pressed.
I got this idea from a bpm counter I was making that integrated the stopwatch and where the space bar thing was a much bigger issue.
I'm just curious, why does simply adding .blur() to my event listener cause the stopwatch to noticeably lag when hitting start/stop? Is there a better alternative I could be using instead? Will this method negatively affect my bpm counter as well? Am I using .blur() correctly?
This is my first post on Stack Overflow so please let me know if I formatted this question wrong in any way.
// initialize variables
const STARTSTOP = document.querySelector('.start-stop');
const RESET = document.querySelector('.reset');
const STOPWATCH = document.querySelector('.stopwatch');
const DISPLAY = document.querySelector('.display');
let stopwatchIsActive = false;
let elapsedTime = 0;
var myInterval;
// stopwatch functions
function convertElapsedTimeToString() {
let milliseconds = Math.floor((elapsedTime % 1000) / 10),
seconds = Math.floor((elapsedTime / 1000) % 60),
minutes = Math.floor((elapsedTime / (1000 * 60)) % 60),
hours = Math.floor((elapsedTime / (1000 * 60 * 60)) % 24);
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
milliseconds = (milliseconds < 10) ? "0" + milliseconds : milliseconds;
STOPWATCH.innerHTML = minutes + ":" + seconds + ":" + milliseconds;
if (hours >= 1) {
hours = (hours < 10) ? "0" + hours : hours;
STOPWATCH.innerHTML = hours + ":" + minutes + ":" + seconds;
};
}
function resetStopwatch() {
STOPWATCH.innerHTML = "00:00:00";
stopwatchIsActive = false;
elapsedTime = 0;
clearInterval(myInterval);
};
function startStopStopwatch() {
if (stopwatchIsActive) {
clearInterval(myInterval);
convertElapsedTimeToString();
stopwatchIsActive = false;
} else if (elapsedTime > 0) {
startTime = Date.now() - elapsedTime;
clearInterval(myInterval);
myInterval = setInterval(function() {
elapsedTime = Date.now() - startTime;
convertElapsedTimeToString();
}, 10);
stopwatchIsActive = true;
} else {
startTime = Date.now();
myInterval = setInterval(function() {
elapsedTime = Date.now() - startTime;
convertElapsedTimeToString();
}, 10);
stopwatchIsActive = true;
}
};
// executes stopwatch functions
RESET.addEventListener("click", () => {
resetStopwatch();
RESET.blur();
});
STARTSTOP.addEventListener("click", () => {
startStopStopwatch();
STARTSTOP.blur();
});
DISPLAY.addEventListener("click", () => {
startStopStopwatch();
});
<div class="container">
<header class="header">This is a Stopwatch.</header>
<div class="display">
<h2 class="stopwatch">00:00:00</h2>
</div>
<div class="stats">
<button class="start-stop">Start/Stop</button>
</div>
<button class="reset">RESET</button>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
