web-dev-qa-db-ja.com

非同期/待機を使用してデバウンスするにはどうすればよいですか？

入力ボックスがあります。ユーザーが入力を停止した後、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ミリ秒が経過した後にのみ表示されます。

デバウンスと待機を使用するにはどうすればよいですか？

javascriptasync-awaitlodashdebounce
8
mikemaccana

問題は最後の行にありました：

}), 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>
8
Konstantin Azizov