博客

前言

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

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

。。。

。。。