现在大部分项目都是用React或者Vue，配上UI库快速搭建系统，确实方便了日常的开发工作。在拥抱框架和开源工具库的同时，我们逐渐忘记了javascript的基础知识，因为工具库太多了，我们需要的在npm上都有。今天选了节流和防抖这个话题来聊聊，这也是一道高频面试题。很多人分不清节流和防抖的概念。不知道这个场景是用节流还是防抖？为什么会有节流和防抖？我们常见的有监听浏览器滚动事件，或者监听输入框值变化查询搜索结果等，这些场景有一个共同的特点，就是执行频率高，但是我们不需要太频繁，比如滚动事件，几百毫秒或者一秒的间隔执行回调可以满足业务需求，所以引入节流和防抖的概念来减少事件回调的执行，提高浏览器性能。概念节流：在规定的时间内，只执行一次。如果在这段时间内多次触发，则只有一次生效。防抖：在指定时间内，只执行一次。如果在这段时间内多次触发，则重新开始计时。以前我对如何理解和记忆感到困惑，但后来我想到了一个形象的比喻。节流：就像流水一样，虽然要节流，但还是要流，一段一段，时间一到就执行一次。防抖：与节流相反，频繁骚扰，重新定时，不会执行，只在这个时间内，没有骚扰，最后才会执行。理解了使用场景的概念，就可以区分使用场景，节流场景：监控浏览器滚动防抖场景：输入输入搜索（只有当输入停止（多少秒不按键盘）时，搜索istriggered)代码介绍主要是概念，很好理解，代码实现很简单，这里是一个方法//throttlingfunctionthrottle(fn,delay){lettimerreturnfunction(){if(timer){returnfalse}timer=setTimeout(()=>{fn()clearTimeout(timer);timer=null;},delay)}}//debouncefunctiondebounce(fn,delay){lettimer=nullreturnfunction(){if(定时器）{clearTimeout（定时器）}timer=setTimeout（fn，delay）}}
