How can I debounce using async/await?

Question

I have an input box. After the user has stopped typing, I want to perform an HTTP request and await the results.

Here's a jsbin

Since network requests aren't allowed on jsbin, I've used setTimeout() instead.

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

However when I type in the box, 'Doing search' appears immediately every character - I want it to only appear after the 500ms has expired.

How can I use debounce and await?

Answer 1

The problem was at the last line:

}), 500);

You should close debounce function call after time argument was specified:

}, 500));

 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('keydown', _.debounce(async function() { log('Doing search'); var result = await delayedResults; log('Result is', result); }, 500)); 

 <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script> <input>