闭包之节流防抖 / 在Vue中使用节流和防抖

最新推荐文章于 2024-07-31 23:57:36 发布

雕荣

最新推荐文章于 2024-07-31 23:57:36 发布

阅读量1.1k

点赞数 2

文章标签：节流防抖 vue 闭包

本文链接：https://blog.csdn.net/fireInNight/article/details/101020459

版权

本文探讨了闭包在Vue项目中的应用，特别关注节流和防抖技术。作者通过实例揭示了一个资深开发者在理解和应用节流、防抖时遇到的问题，分析了错误代码并提供了修正方案，强调了闭包作为外部访问内部变量桥梁的重要性。同时，文章还介绍了如何确保节流函数的唯一性，并提到了防抖函数的概念。

摘要由CSDN通过智能技术生成

前言

闭包这个东西，不仅对于ES（ECMAScript）语言的初学者来说是很难理解的一个东西，而且对于许多做了很多项目的“老手”来说，可能也会栽跟头。

而节流和防抖这两个极具应用价值的闭包实现，更是容易让人云里雾里，网上容易找到的节流和防抖函数，如果不能深入理解，也是很难移植到自己的项目中的。

而我写这篇博客的原因，就是因为一个和我同期的“老手”在这里栽了个大跟头。

由于此问题在vue上产生，我就在vue上解决。

一、有问题的代码片段

// 所有代码在同一文件
data () {
	return {
		lastTime: 0,
		targetData: {
			value: '1'
		}
	}
},
watch: {
	targetData: {
		handler (newVal) {
			this.throttle(this.changeElement(newVal), 1000)
		},
		deep: true
	}
},
methods: {
	throttle (func, wait) { // 节流函数
		this.lastTime= 0
		return function () {
			let now = +new Date();
			if (now - this.lastTime > wait) {
				func.apply(this, arguments)
				this.lastTime = now
			}
		}
	},
	changeElement (val) { // 目标函数
		console.log(val)
	}
}

先看以上代码，然后在心里默默想着有哪些问题，会出现什么状况，然后再往下看。
。。。

。。。