使用闭包实现按钮移动动画

移动动画闭包的使用

	let btns = document.querySelectorAll('button')
	btns.forEach((item) => {
		item.addEventListener('click', () => {
			let left = 1
			setInterval(() => {
				item.style.marginLeft = left++ + 'px'
			}, 100)
		})
	})

假如按如上写，这时会出现多次点击动画抖动的问题。这是为甚么呢？仔细一看发现每点击按钮一次就会执行一次点击事件，创建一个环境，类似下面这种情况。假如点击了5次就创建了5个定时器，而每个定时器的的left值都是从1开始的，这时就会出现抖动的情况

接着改进，然后就想着那就将left提取放到绑定的事件外

let btns = document.querySelectorAll('button')
btns.forEach((item) => {
	let left = 1
	item.addEventListener('click', () => {
		setInterval(() => {
			item.style.marginLeft = left++ + 'px'
		}, 100)
	})
})

这个时候抖动的问题是解决了，但是会发现多次点击，按钮的移动速度加快了。原来是因为，假如点击了5 次按钮，以意味着创建了5个定时器，那就不是100毫秒执行一次了，而是20毫秒就执行了一次。如何解决移动加速问题呢？只创建一个定时器就可以解决了。

let btns = document.querySelectorAll('button')
btns.forEach((item) => {
	let bind = false
	item.addEventListener('click', () => {
		if (!bind) {
			bind = true
			let left = 1
			setInterval(() => {
				item.style.marginLeft = left++ + 'px'
			}, 100)
		}
		
	})
})

到此为止，成功！！！！以上只是自己的理解，原谅我还是个菜鸟。