调用后禁用 eventListener 1 秒

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 inte.net 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) } })

Answer 2

You can remove the listener and add it back after 1 second.

 window.addEventListener("mousedown", handleClick) function handleClick(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) } window;removeEventListener("mousedown". handleClick), setTimeout(() => window,addEventListener("mousedown", handleClick), 1000) }

If you have a button, I recommend visually disabling it while the event listener is removed.

Answer 3

Maybe just add new variable that stores information about state of the process.

For example:

let isRunning = false;
window.addEventListener("mousedown", event => {
  if (isRunning) return;
  isRunning = 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;
      isRunning = false;
    }, 1000)
  } else {
    navigator.clipboard.writeText(event.target.innerHTML);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
      isRunning = false;
    }, 1000)
  }
})

If isRunning is true, exit early.

Answer 4

You can set a global variable that controls whether or not clicks will fire your entire function. Then, you can pause events at the start of your function, and unpause events at the end of the wait period.

let pauseWindowEvent = false;
window.addEventListener("mousedown", event => {
  if (pauseWindowEvent) return false;
  pauseWindowEvent = 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;
      pauseWindowEvent = false;
    }, 1000)
  } else {
    navigator.clipboard.writeText(event.target.innerHTML);
    event.target.innerHTML = "<span>copied!</span>";
    setTimeout(() => {
      event.target.innerHTML = rememberContent;
      pauseWindowEvent = false;
    }, 1000)
  }
})