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