js--防抖函数和节流

防抖函数

当持续触发事件，一定时间内没有再触发时间，事件处理函数才会执行一次，如果设定的时间到来之前，又触发了事件，就重新开始延时。
触发事件，一段时间内，没有触发事件执行，肯定是定时器。
在设定的时间内，又一次触发了事件，重新开始延时，代表的就是重新开始定时器。
那么意味着上一次还没结束的定时器要清除掉，重新开始。

let timer
clearInterval(timer)
timer=setTimeout(function(){
},delay)

实际的应用：
使用echarts时，改变浏览器宽度的时候，希望重新渲染echarts的图像，可以使用此函数，提升性能。（虽然echarts里有自带的resize函数）；
典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时，解决搜索的bug。

function debounce(delay){
	let timer
	return function(value){
		clearTimeout(timer)
		//我们想清除的是setTimeout 我们应该存储这个timer的变量
		//timer变量需要一直存放在内存中；
		//既然你不想打印之前已经输入的结果，清楚以前触发的定时器；
		//我们应该存储这个timer的变量；
		//一直要在内存当中，内存的泄露，闭包
		timer=setTimeout(function(){
			console.log(value)
		},delay)
	}
}
//我需要的是，首先，输入框的结果只出现一次，是在我键盘抬起不再输入后的1秒之后
var denounFun=debounce(1000)
input.addEventListener('keyup',function(e){
	debounceFun(e.target.value)
})

节流函数

function thro(func,wait){
	//例如，时间是一秒，即便你在这一秒中点击了180次，但也只会执行一次；
	let timerOut
	//相当于在办理业务
	return function(){
		if(!timerOut){
			//set 不执行，如果timerOut有值的话就不执行
			timerOut = setTimeout（function（）{
				func（）
				//银行工作人员办理完之后，后面就不办理了
				timerOut=null
			},wait）
		}
	}
}
function handle(){
	console.log(Math.random())
}
document.getElementById('button').onclick=thro(handle,2000)