当初大多数我的项目都在用 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) 
    }
}