I want to call a function once during repeating event listeners

Question

I'm trying to execute a function once while there are many times a single event listener is repeating, I'm building a text-to-speech app, and I'm trying critical event listeners but the app generates voice again and again on every single event, I did with start/stop button it works, but I want to speak automatically after 1 or 0.5 seconds when we type something in textarea

document.querySelector("textarea").addEventListener("keyup", async e => {
    let executed = false;
    speech.text = document.querySelector("textarea").value;
    if (!executed) {
      executed = true;
      window.speechSynthesis.speak(speech);
    } else {
      console.log("executed");
    }
  });

I tried to complete using Booleans but not worked

Thank you very much to Aahan, Fcmam5 and Assembler. Debounce method worked as expected, — SAKSoomro, Feb 18 '23 at 12:14
@SAKSoomro probably mark the correct answer to close this question for the community. — Aahan Agarwal, Feb 18 '23 at 14:36

Aahan Agarwal · Answer 1 · 2023-02-18T11:42:23.713

You're resetting executed on every event trigger.

let isExecuted = false;

const debounce = (func, delay) => {
  let debounceTimer
  return function() {
    const context = this
    const args = arguments
    clearTimeout(debounceTimer)
    debounceTimer
      = setTimeout(() => func.apply(context, args), delay)
  }
}

document.querySelector("textarea").addEventListener("keyup", async(_event) => {
  speech.text = _event.target.value;

  if (!isExecuted) {
    isExecuted = true;
    debounce(window.speechSynthesis.speak(speech), 1500);
  } else {
    console.log("already executed");
  }
});

score 0 · Answer 2 · answered Feb 18 '23 at 11:41

    function oneTimeFunction(e){
       speech.text = document.querySelector("textarea").value;
       window.speechSynthesis.speak(speech);
       console.log("executed");
       e.target.removeEventListener(
          e.type, //indicate event type - here the same as fired
          oneTimeFunction //which function to remove from certain listener
       )
    }
    document.querySelector("textarea").addEventListener("keyup", oneTimeFunction );

So that function removes itself from target element after executng it's body. Hence it actually detects which type of event it was subscribed so addEventListener is quite readable.

I hopoe it's most easy way to provide and to uderstand. To remove some listener You need to know event name and function name, so You have to define function what i did.

I want to call a function once during repeating event listeners

2 Answers2