函数的防抖

<!--
            1、 什么是函数防抖?
                指的是，触发事件后在规定时间内只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间
                比如:   当你在电梯里面的时候，
                        电梯开始倒数5秒关闭门，
                        在5秒时间内，
                        突然来了一个人，
                        门就会自动打开，
                        电梯就会重新计时5秒。
                        如果在5秒时间内又来了一个人，
                        电梯就会又重新计时5秒。
                        如果在5秒时间内又又来了一个人，
                        电梯就会又重新计时5秒。
                        开始倒计时 5 4 3 2 1，
                        此时没有人来了，电梯关门开始运行
                        
            2、 为什么要进行函数防抖?
                假如你做了一个输入框，用户输入 拿到里面的值 再从服务器请求数据
                总不能用户输入一个值 请求一次服务器，这样服务器也顶不住啊，服务器也懵逼了呀
                
 

            3、 函数防抖的原理
                其实就是用到定时器
                假设我一直输入内容，则不去请求数据，如果我输入完了，去请求一次
                再输入，不请求数据，又输入完了，去请求一次
         -->

代码实现：

<input type="text"/>
		 <script type="text/javascript">
		 	//代码实现
			const inp = document.querySelector("input");
			inp.addEventListener("input",debounce(500,() => {
				console.log(inp.value);
			}))
			
			
			/*
				delay : 为几秒后 要执行的函数
				fn : 为执行的代码
			*/
			function debounce(delay, fn) {
				let t = null;
				return function() {
					if (t != null) {
						clearTimeout(t);
					}
					console.log("第一次先执行这里");
					t = setTimeout(fn, delay);
				}
			}
			
			
			/*
				当你一直输入，开始执行函数，打印console.log("第一次先执行这里");
				然后定时器 t 赋值为一个数字 赋值完之后并不会立即去执行fn函数
				因为你一直在输入内容，t 一直在赋值，此时就会一直清除定时器
				然后你输入完了，等待500后就会打印 console.log(inp.value);
			
			*/
			
		 </script>