Disable eventListener for 1 second after invocation

Question

I have an eventListener added to the window that activates code that takes 1000ms to run. Because of this, if you click again in less than 1000ms, it breaks. How can I disable the eventListener from running again within 1000ms of its previous invocation? I have a feeling it may have something to do with Date() but I'm not sure how to implement it.

Here's my code:

window.addEventListener("mousedown", event => {
  let rememberContent = event.target.innerHTML;

  if (event.target.classList.contains('color')) {
    navigator.clipboard.writeText(event.target.dataset.hex);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
    }, 1000)
  } else {
    navigator.clipboard.writeText(event.target.innerHTML);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
    }, 1000)
  }
})

I realize this question has been asked in multiple forms around the internet but I'm struggling to find a vanilla JS solution that works for me. That said, if an answer exists somewhere that I missed, feel free to point me in that direction!

Answer 1

It's called throttling, might be useful to search with that word

let working = false

window.addEventListener("mousedown", event => {
  if (working) return
  working = true
  let rememberContent = event.target.innerHTML;

  if (event.target.classList.contains('color')) {
    navigator.clipboard.writeText(event.target.dataset.hex);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
      working = false
    }, 1000)
  } else {
    navigator.clipboard.writeText(event.target.innerHTML);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
      working = false
    }, 1000)
  }
})