5 Matching Annotations
  1. May 2022
    1. In order to execute an event listener (or any function for that matter) after the user stops typing, we need to know about the two built-in JavaScript methods setTimeout(callback, milliseconds) and clearTimeout(timeout): setTimeout is a JavaScript method that executes a provided function after a specified amount of time (in milliseconds). clearTimeout is a related method that can be used to cancel a timeout that has been queued.

      Step 1. Listen for User Input

      <input type="text" id="my-input" />

      let input = document.querySelector('#my-input'); input.addEventListener('keyup', function (e) { console.log('Value:', input.value); })

      Step2: Debounce Event Handler Function

      let input = document.getElementById('my-input'); let timeout = null;

      input.addEventListener('keyup', function(e) { clearTimeout(timeout);

      timeout = setTimeout(function() { console.llog('Input Value:', textInput.value); }, 1000); })

  2. Jan 2022
    1. So it is safe to use an async function as the callback argument to setTimer and setInterval. You just need toBe sure to wrap any operations that can throw an exception in a try/catch block andBe aware that the timer will not await on the promise returned by your async function
    2. My gut told me calling an async function from the setTimeout callback was a bad thing. Since the setTimeout machinery ignores the return value of the function, there is no way it was awaiting on it. This means that there will be an unhandled promise. An unhandled promise could mean problems if the function called in the callback takes a long time to complete or throws an error.
  3. Aug 2020