快速手写一个简单的函数防抖与函数节流

手写函数防抖：

                   let oInput = document.querySelector('input');
	           let timerId = null;

		   oInput.oninput = function(){

		   timerId&&clearTimeout(timerId); //A&&B,当A为真时执行B。A为假时不执行

		   timerId = setTimeout(function(){
		       console.log('123');
				},1000)
		    }

原理：用户进行不断地连续操作时，就开始设置定时器并且不断地删除上一个定时器，当用户连续操作停止地时候，就会设置出一个新地定时器，在1000ms的间隔内只要不出现下一次操作，这个定时器可以被正常使用触发。

**函数防抖是优化高频率执行代码的一种手段，可以让被调用的函数再一次连续的高频操作中只被执行一次**

**函数防抖能够提升网页性能，减少代码的执行次数**

使用场景：oninput / onmousemove /onscroll /onresize 等事件

手写函数节流：

                        let oInput = document.querySelector('input');
			let timerId = null;

			let flag = true
			oInput.oninput = function(){
				if(flag === false){
					return ;
				}
				flag =false
				timerId&&clearTimeout(timerId); 
				timerId = setTimeout(function(){
					flag = true
					console.log('123')
				},1000)
			}

原理

1.第一次进入时，flag = true，不执行if判断内部的代码，直接设置flag = false，并开启1秒的定时器。

2.第二次进入时，flag = false ， 执行if判断内部的代码，return掉，不会执行后续代码

3.第三次进入时，flag = false ， 执行if判断内部的代码，return掉，不会执行后续代码

...

...

*在某次进入前,第1步开启的定时器执行了！定时器把 flag 修改为true

4.在这次进入时，flag = true ，不执行if判断内部代码,直接设置flag = false，删掉上一个定时器并且开启下一个新的定时器

......

以此类推

**函数防抖与函数节流的区别在于：函数防抖在连续操作中始终只执行一次，而函数节流在连续操作中会执行2~3次。**