vue中使用防抖函数
1.新建lodash.js
// /*函数防抖*/ export function throttle(fn) { let canRun = true; // 通过闭包保存一个标记 return function () { // 在函数开头判断标记是否为true,不为true则return if (!canRun) return; // 立即设置为false canRun = false; // 将外部传入的函数的执行放在setTimeout中 setTimeout(() => { // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。 // 当定时器没有执行的时候标记永远是false,在开头被return掉 fn.apply(this, arguments); canRun = true; }, 500); }; }
注:我这手把时间统一定死了,如果想自定义的话可以把时间作为参数自己传进来,方法修改如下:
// /*函数防抖*/ export function throttle(fn,delay) { let canRun = true; // 通过闭包保存一个标记 return function () { // 在函数开头判断标记是否为true,不为true则return if (!canRun) return; // 立即设置为false canRun = false; // 将外部传入的函数的执行放在setTimeout中 setTimeout(() => { // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。 // 当定时器没有执行的时候标记永远是false,在开头被return掉 fn.apply(this, arguments); canRun = true; }, delay); }; }
使用时:
//保存用户信息修改 save: throttle(function (500) { //... })
2.在页面中引用
import { throttle } from "@/utils/lodash";
3.在页面中使用
![](https://img2020.cnblogs.com/blog/1311272/202112/1311272-20211208154140312-411827021.png)
示例代码:
//保存用户信息修改 save: throttle(function (e) { //表单验证 this.$refs["dialogForm"].validate((vaild) => { if (vaild) { saveUser(this.dialogForm).then((ret) => { if (ret.isSuccess) { operateSuccess(); this.getTableList(); } else { operateFail(ret.errMsg); } this.dialogVisible = false; }); } }); }),