examples/debounce.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Patella Example - Debounced Search</title>
    <script src="https://cdn.jsdelivr.net/npm/patella@2.2.2"></script>
  </head>
  <body>
    <main>
      <h1>Debounced Search</h1>
      <input type="text" oninput="model.input = value" placeholder="Enter your debounced search"/>
      <h3 id="search"></h3>
    </main>
    <script>
      const $search = document.getElementById("search");

      const model = Patella.observe({
        input: "",
        search: ""
      });

      Patella.computed(() => {
        search.innerText = model.search;
      });

      let timeoutID;
      Patella.computed(() => {
        const input = model.input;
        if (timeoutID) clearTimeout(timeoutID);
        timeoutID = setTimeout(() => {
          model.search = input;
        }, 1000);
      });
    </script>
    <footer>
      <a href="https://github.com/luawtf/Patella/blob/master/examples/debounce.html">View source</a>
    </footer>
  </body>
</html>