'.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