分清节流和防抖

现在大多数项目都在用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) 
    }
}