title: How can I debounce using async/await?
body: <p>I have an input box. After the user has stopped typing, I want to perform an HTTP request and await the results.</p>
  
  <p><a href="http://jsbin.com/towudev/edit?html,js,output" rel="noreferrer">Here's a jsbin</a></p>
  
  <p>Since network requests aren't allowed on jsbin, I've used <code>setTimeout()</code> instead.</p>
  
  <pre><code>var log = console.log.bind(console)
  
  var delayedResults = new Promise(function(resolve) {
    setTimeout(function(){
      resolve('Wooo I am the result!')
    }, 3000);
  });
  
  document.querySelector('input').addEventListener('input', _.debounce(async function(){
    log('Doing search')
    var result = await delayedResults
    log('Result is', result)
  }), 500);
  </code></pre>
  
  <p>However when I type in the box, 'Doing search' appears immediately every character - I want it to only appear after the 500ms has expired. </p>
  
  <p>How can I use debounce and await?</p>