Debounce Handler

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Debounce handler demo</title>
  </head>
  <body>
    <input class="my-input" placeholder="Demo" />

    <script>
      let timer;
      let stoppedInterval = 500;
      let inputElement = document.querySelector('.my-input');

      function handleKeyUp() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log(inputElement.value);
        }, stoppedInterval);
      }

      inputElement.addEventListener('keyup', handleKeyUp);
    </script>
  </body>
</html>

Content properties

  • Type: Note
  • Category: JavaScript
  • Tags: frontend, javascript
  • Custom slug: None

This is a preview of a simpler page design that I'm working on over the next little bit. I've finally added a (click it!) but there's still a few pages left to be converted so don't worry if things don't look quite right just yet 🙏

Content on blog pages use the CC-BY-SA license. The source code and notes use the MIT license. Unsure? Mention me on Mastodon.