vue 防抖 案例搜索

const leader_uid_loading = ref(false);
import { debounce } from "lodash-es";
// 搜索员工
const customer_data = ref([]);
let lastFetchId = 0;
const searchUser = debounce((value) => {
  if (value == "") {
    return;
  }
  //debounce 防止多次调接口
  lastFetchId += 1; //只取最后一次结果
  const fetchId = lastFetchId;
  customer_data.value = [];
  leader_uid_loading.value = true;
  api
    .customerList({ username: value })
    .then((res) => {
      if (fetchId !== lastFetchId) {
        // for fetch callback order
        return;
      }
      if (res.code == 1) {
        const data = res.data.map((v) => ({
          text: v.username + "-" + v.sex,
          value: v.cid,
          username: v.username,
          cid: v.cid,
          sex: v.sex,
        }));
        // console.log(customer_data.value);

        customer_data.value = data;
        leader_uid_loading.value = false;
      } else {
        message.error(res.msg);
        leader_uid_loading.value = false;
        customer_data.value = [];
      }
    })
    .catch((res) => {
      leader_uid_loading.value = false;
      customer_data.value = [];
      console.log(res);
    });
}, 500);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容