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

本文探讨了闭包在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)
	}
}

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

。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值