Как я могу отменить использование async/await?

Question

У меня есть поле ввода. После того, как пользователь перестал печатать, я хочу выполнить HTTP-запрос и дождаться результатов.

Вот jsbin

Поскольку сетевые запросы не разрешены на jsbin, я использовал setTimeout() вместо.

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

Однако, когда я набираю текст в поле, "Поиск" появляется сразу после каждого символа - я хочу, чтобы он появлялся только после истечения 500 мс.

Как я могу использовать debounce и ждать?

Answer 1

Проблема была в последней строке:

}), 500);

Вы должны закрыть debounce Вызов функции после указания времени:

}, 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>