第三十七节防抖、节流封装composables 通用函数搜索框防重复请求本节目标区分防抖 debounce、节流 throttle防抖输入框搜索停止输入后延迟执行适合搜索输入节流滚动、窗口缩放固定间隔执行适合滚动、按钮频繁点击封装成composables组合式函数项目全局复用用户管理页面搜索框接入防抖防止连续输入疯狂发请求原理简述防抖每次触发就重置计时器最后一次操作后等待 delay 才执行节流规定时间内最多只执行一次步骤 1新建文件src/composables/useDebounceThrottle.jsimport { ref } from vue // 防抖 export function useDebounce(fn, delay 500) { const timer ref(null) const debounceFn (...args) { // 每次触发清除旧定时器 if (timer.value) clearTimeout(timer.value) timer.value setTimeout(() { fn(...args) }, delay) } // 手动取消防抖 const cancel () { if (timer.value) { clearTimeout(timer.value) timer.value null } } return { debounceFn, cancel } } // 节流 export function useThrottle(fn, delay 500) { const lastTime ref(0) const throttleFn (...args) { const now Date.now() if (now - lastTime.value delay) { lastTime.value now fn(...args) } } return { throttleFn } }步骤 2用户列表页面接入防抖src/views/system/user/user.vue原来的搜索是输入框 change 或者点击查询现在输入框实时搜索用防抖template PageCard title用户管理 el-form :modelqueryParams inline el-form-item label用户名 !-- 绑定防抖后的查询方法 -- el-input v-modelqueryParams.username placeholder请输入用户名 clearable inputhandleSearch / /el-form-item el-form-item el-button typeprimary clickgetList查询/el-button el-button clickresetQuery重置/el-button /el-form-item /el-form !-- 表格省略 -- /PageCard /template script setup import { ref, reactive, onUnmounted } from vue // 引入防抖 import { useDebounce } from /composables/useDebounceThrottle import { getUserListApi } from /api/system/user defineOptions({ name: UserList }) const queryParams reactive({ username: , pageNum: 1, pageSize: 10 }) const tableData ref([]) const total ref(0) // 获取列表 const getList async () { const res await getUserListApi(queryParams) if(res.code 200){ tableData.value res.data.records total.value res.data.total } } // ✅ 包装防抖500毫秒延迟 const { debounceFn: handleSearch, cancel } useDebounce(getList, 500) // 组件销毁清除定时器防止内存泄漏 onUnmounted((){ cancel() }) // 重置 const resetQuery () { queryParams.username queryParams.pageNum 1 getList() } getList() /script步骤 3按钮频繁点击场景节流示例防止重复提交import { useThrottle } from /composables/useDebounceThrottle // 提交按钮1s内只能点击一次 const submitForm async () { console.log(提交表单) } const { throttleFn: handleSubmit } useThrottle(submitForm,1000)模板el-button typeprimary clickhandleSubmit提交/el-button✅ 测试清单保存重启项目pnpm dev进入用户管理在用户名输入框快速连续打字✅ 不会每次打字立刻发接口停止输入半秒后才请求一次快速重复点击提交按钮节流案例1 秒内只执行一次常见坑composables 函数只能在 setup 顶层调用不能写在 if / 循环里面组件销毁一定要清除定时器避免内存泄漏delay 单位是毫秒搜索一般 300~500按钮节流推荐 1000