Vue封装全局防抖节流函数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue封装全局防抖节流函数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含935字，纯文字阅读大概需要2分钟。

内容图文

一：目录结构

二：utils.js文件

/* 防抖节流函数 */
let timeout = null // 创建一个标记用来存放定时器的返回值
let canRun = true;
//!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！
export function debounce(fn) {
	return function() {
		clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 
		timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
			fn.apply(this, arguments)
		}, 2000)
	}
}
export function throttle(fn) {
	return function() {
		if (!canRun) return
		canRun = false
		setTimeout(function() {
			fn.apply(this, arguments)
			canRun = true
		}, 3000);
	}
}

三：main.js全局引入

import * as utils from '../common/utils.js';
//这样才行，我也不知道为什么，反正就是需要多一个 * as
Vue.use(utils)//引用这个utils
Vue.prototype.$utils = utils //全局请求方法

四：使用方法

//在任意文件：注意这里要手动调用，因为返回的是一个函数。
this.$utils.debounce(fn)();

内容总结

以上是互联网集市为您收集整理的Vue封装全局防抖节流函数全部内容，希望文章能够帮你解决Vue封装全局防抖节流函数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---