防止接口多次调用

129 阅读1分钟

在实际开发弹窗的时候,会按下确认调用接口,如下图所示:

image.png

采用的方法是 按钮禁用

  • 点击确认键,禁用按钮
  • 接口调用成功,则关闭窗口
  • 接口调用失败,则取消禁用
  • 重新打开弹窗,则取消禁用

为什么说这种场景并不适合防抖呢?

  • 不存在多次请求的情况,只需要一次接口调用
  • 会等待一段时间再进行程序执行;因此会使用户感到反应迟钝。

什么样的场景适合防抖?

  • 多次请求
  • 最后一次操作过一段时间再调用接口

搜索框联想 如果使用节流,那么即使用户正在输入,我们也会在指定的时间间隔发送请求。但很多时候,用户的输入可能还没有结束。因此需要在结束之后进行请求。如果我们使用节流,可能会发送一些基于部分输入或者已经过时的输入的请求,这些请求的结果可能并不准确,甚至可能在结果返回时已经不再需要。

const debounceSearch = debounce(() => {
    getDataList();
}, 500);
debounceSearch();