防抖&节流最完美的解释

一、防抖函数
原理：在事件被触发n秒后再执行回调，如果在n秒内再次触发，则重新计时；
适用场景：
1、典型的案例就是输入搜索：输入结束后N秒才进行搜索请求，n秒内又输入的内容就重新计时。解决这个bug
2、使用Echarts的时候,改变浏览器的宽度希望重新渲染Echarts图像，可以使用此函数提升性能。(虽然Echarts里有自带的resize函数)
3、登录、提交、表单提交按钮的时候防止重复多次提交；
搜索联想词功能类似生存环境请用lodash.debounce
以下是手写简化版的防抖函数：闭包实现的

function debounce(delay){
	let timer;
	return function (value){
		// 一定要清除setTimeout 我们应该存储timer这个变量
		clearTimeout(timer)
		timer = setTimeout(function() {
			callback(value)
		}, delay)
	}
}

二、节流函数
原理：当持续触发事件的时候一段时间内只调用一次事件处理函数 也就是一段时间内只做一件事情
经典案例：鼠标不断的点击事件，规定在n秒内多次点击只有一次生效

function thro(func, wait) {
	// 会执行你点击了 多少次 就会执行多少次
	// 这不是咱们想要的 我们想要的是 比如说时间是一秒 一秒内点了100次 我也只执行一次
	let timeout
	return function() {
		if (!timeout) {
			// set 不执行 如果timeout有值的话就不执行
			timeout = setTimeout(function() {
				func()
				timeout = null
			}, wait)
		}
	}
}

三、防抖、节流的实际应用
图片懒加载的优化就是一个较为实际的应用