title: How to detect `input` value changes as user typing in?
body: <p>What I want to do is that, there is an <code>input</code> box, when user types in any thing, the code should fire a request to the server and get back some data to users.</p>
  
  <p>This is just a <code>typeahead</code> suggestion functionality, but still not exactly the same.</p>
  
  <p>What I currently have is following code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("input").on("input", function(ev) {
  alert(`${ev.type} event detected`)
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" placeholder="text"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the code works as expected, that is saying whenever the <code>input</code> box value changes, the event is captured.</p>
  
  <p>My question is, how to make the code wait a few seconds or milli-seconds before handling the <code>input</code> change events? Say fire the code <code>1000ms</code> later when the <code>input</code> stops changing.</p>
  
  <p>Since now, the code will fire per every single letter I typed in, that would results into a lots of events, which I don't want.</p>