需求背景

最近修改了这么一个需求。 有一个远程搜索商品的选择下拉框

使用antd自带的onSearch方法每次输入的时候都会调用一次接口，在打出要搜索的关键字的时候，有很多没有意义的请求

于是决定对调用onSearch作一个简单修改，使得用户打字结束后再进行搜索，减少无意义的请求

原版代码

const onSearch = value => {
    searchGoods({name: value}).then(res => {
      const result = res?.data ?? [];
      setGoods(result)
    });
};

修改后

let timeout;

const onSearch = value => {
  // 每次有输入，先清除上一个延时操作
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    searchGoods({name: value}).then(res => {
      const result = res?.data ?? [];
      setGoods(result)
    });
  // 当用户停止输入500ms 后再去请求
  }, 500);
};

虽然不排除打字慢的依然会多请求几次，但是超过500ms就感觉太卡顿了