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

最新推荐文章于 2025-07-04 06:51:21 发布

原创

最新推荐文章于 2025-07-04 06:51:21 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#节流 #防抖 #vue #闭包

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

前言

闭包这个东西，不仅对于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)
	}
}

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

。。。

是不是觉得上面的代码一团乱麻，不知道他想要干什么？
1、节流函