js中的防抖和节流函数

总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

//防抖：函数防抖就是指在触发事件后，在n秒内函数只能执行一次，
			// 如果触发事件在n秒内又触发了这个事件，则会重新计算函数延迟执行时间。
            // 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。
            //  缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟。
            // 举个例子：坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待10秒，
			// 此时如果又有人进来（10秒之内无重复触发事件），那么电梯就会再多等10秒。
			// 在上面这个例子中，电梯检测到有人进入10秒之后，才会关闭电梯门开始运作，
			// 因此，函数防抖的关键在于，在一个事件发生的一定时间之后，才执行特定的动作。
			
			// 为什么需要？
			// 前端开发中，有一些事件，例如onresize,scroll,mousemove,mousehover等，
			// 会被频繁的触发（短时间内），不做限制的话，有可能一秒之内执行几十次，几百次，
			// 如果在这些函数内部执行了其他函数，尤其是操作dom的函数（浏览器操作dom是很耗费性能的），
			// 那不仅仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死，崩溃。除此之外，
			// 短时间内重复的ajax调用不仅会造成数据关系的混乱，，还会造成网络拥塞，增加服务器的压力。
			
			//如何解决问题？
			// 函数防抖的要点，是需要一个setTimeout来辅助，延迟运行需要执行的代码。
			// 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清理掉，重新开始计时。
			// 若计时期间事件没有被重新触发，则延迟时间计时完毕执行目标代码。
			function debounce(fn){
				let timeout=null;
				return function(){
					clearInterval(timeout);
					timeout=setTimeout(()=>{
						fn.apply(this,arguments)
					},1000);
				}
			}
			function sayHi(){
				console.log('防抖成功');
			}
			let inp=document.getElementById('inp');
			inp.addEventListener("input",debounce(sayHi));
			
			
			//节流：高频事件触发，但在n秒内只执行一次，所以节流就会稀释函数的执行频率。
			// 节流单纯的降低代码执行频率，保证一段时间内目标代码只执行一次。
			// 实现方式：每次触发事件时，如果当前有等待执行的延迟函数，则直接return。
			
			function throttle(fn){
				let canRun=true;
				return function(){
					//在函数开头判断标记是否为true，不为true则直接return
					if(!canRun) return;
					canRun=false;
					setTimeout(()=>{
						fn.apply(this,arguments);
						canRun=true;
					},1000);
				};
			}
			function sayHi1(){
				console.log('hello');
			}
			let inp=document.getElementById('inp');
			inp.addEventListener('input',throttle(sayHi1));