如何使用 async/await 去抖动？

Question

我有一个输入框。在用户停止输入后，我想执行一个 HTTP 请求并等待结果。

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

然而，当我在框中键入内容时，'Doing search' 会立即出现在每个字符上 - 我希望它仅在 500 毫秒过期后出现。

如何使用 debounce 和 await？

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>

如何使用 async/await 去抖动？

How can I debounce using async/await?

javascript

async-await

lodash

debounce