【前端】如何在vue项目中的utils.js封装防抖节流函数

防抖函数：

/**
* [防抖函数]
* @param {func} Function [需要执行的函数]
* @param {wait} Number [间隔时间]
* 组件内调用：this.$utils.debounce(this.aa, 1000)();
*/debounce(func, wait) {let timeout;return function () {let context = this;let args = arguments;if(timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
},wait);
};
}

组件内调用：this.$utils.debounce(this.aa, 1000)(); 感觉有点奇怪。

打比方我现在给以下结构绑一个input事件

html

methods: {change() {this.$public.debounce(this.aa, 1000)();
},aa() {this.bb = 5;console.log(this.bb);
},
}

执行效果并不理想，连续输入触发input事件并不会等我完全输入完才打印出5 。感觉这并不是防抖呀，有没有封装过的大佬给点建议

回答

你对 debounce 的理解有问题，debounce 返回的函数，QQ号码拍卖平台地图多次触发会有 debounce 功能，比如这样

methods: { change() { this.aa();
}, aa:debounce(function() { this.bb = 5; console.log(this.bb);
},1000)
}

你在 change 里，每次生成一个新的函数，并调用，当然会有问题；

this.$public.debounce 这个用法也不合适，可以直接把工具函数放到@/utils目录里，然后需要用某个函数，就引入某个函数

import {debounce} from '@/utils'

这样打的包体积可能会更小更合适

debounce 在 lodash 里有成熟实现了,不推荐自己实现debounce 不叫节流，节流是 throttle，两者有细微差别函数注释写错了 /**
* @description 防抖函数
* @param {Function} func 需要执行的函数
* @param {Number} wait 间隔时间
* @example
* 组件内调用：xxxxxxxx
*/

timeout确实会先延迟再执行的，你可以先执行一次再调用timeout

更多相关文章

随机推荐