在Vue3中怎么封装防抖函数

防抖函数如果不是只使用一次，建议封装起来

防抖函数最常用在搜索

第一步

可以在hook文件夹里面或者其它地方， 创建一个js文件，在文件里面写防抖函数

// 这里传入的是：
// fn：需要加上防抖的函数
// delay：延迟的时间

export function debounce(fn, delay) {
  let timer = null; // 形成闭包
  return function () {
    if (timer) {
      clearTimeout(timer); // 防抖
    }
    timer = setTimeout(() => {
      fn(); // 执行传入的函数
    }, delay);
  };
}

---

第二步

在你想要用防抖函数的vue文件中引入

import { debounce } from "@src/hook/Debounce.js";

---

第三步

在vue文件中使用

const searchDebounceHandler = debounce(search, 1000); // search是需要加防抖的函数

 然后就可以把searchDebounceHandler 这个函数放到事件里面去

如（点击事件）

@click="searchDebounceHandler"