1 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); })