使用 Lodash 的 debounce() 函数限制方法

Question

Lodash's debounce()function  允许您延迟调用函数，直到经过一定的毫秒数。 一种常见的用例 debounce() 是用于自动完成的 HTTP API 调用：假设当用户输入输入时，您只想执行一次 HTTP 请求。 下面是一个示例，说明如何 debounce() 工作。

const wait = 100;
el.addEventListener('change', _.debounce(autocomplete, wait));

el.value = 'te';
el.trigger('change'); // "Called: te" after 100ms
await new Promise(resolve => setTimeout(resolve, 110));

el.value = 'test';
// Nothing, because the next 'change' event takes over
el.trigger('change');
await new Promise(resolve => setTimeout(resolve, 50));

el.value = 'testing';
el.trigger('change'); // "Called: testing" after 100ms

function autocomplete() {
  console.log('Called:', el.value);
}

在实践中， autocomplete() 函数会发出一个 HTTP 请求。autocomplete() 函数 直到用户停止输入 100 毫秒后才会调用。

这篇博文有一个方便的比喻 debounce()：debounce()像电梯一样工作。 电梯直到门关闭并且门保持打开至少 100ms 才离开。 如果另一个函数调用进来，那就像有人把门开着，然后门又等了 100 毫秒才关上。

还有一个 maxWait 函数在执行前将等待的选项。 如果 maxWait = 120，以下示例中的第二个 更改 事件将在 60 毫秒而不是 100 毫秒后执行。

const wait = 100;
el.addEventListener('change', _.debounce(autocomplete, wait, {
  maxWait: 120
}));

el.value = 'te';
el.trigger('change');
await new Promise(resolve => setTimeout(resolve, 60));

el.value = 'test';
el.trigger('change'); // "Called: test" after 60ms

function autocomplete() {
  console.log('Called:', el.value);
}