防抖与节流都是闭包的应用，先了解闭包，再了解防抖与节流防抖（debounce）。明白了，在单反中，是有防抖机制的。因为人拿着单反会手抖（单反很重），按下快门的一瞬间，照片会模糊，所以有防抖机制，防止新手拍出模糊的照片。单反里面的防抖就是为了防止抖动，让人拍出清晰的照片，JavaScript中的防抖是干什么用的？同理，它的作用是防止抖动。想象一下，当你频繁触发一个事件时，会造成不必要的性能损失，那么在停止触发后让事件触发，从而降低一些性能。防抖的定义就是延迟执行，你一直在操作触发事件，一直没有执行。当你停止操作等待多少秒后执行，也就是说无论事件触发频率多高，都必须在事件触发n秒后执行。如果事件触发n秒后再次触发事件，则以新事件的事件为准，n秒后执行。简而言之，它不会执行手写防抖，直到你触发事件并且在n秒内不再触发事件。根据定义，我们知道它会在n秒后执行，所以我们使用定时器来实现functiondebounce(event,wait){lettimer=null;返回函数(...args){clearTimeout(timer);//清除setTimeout，使回调函数不执行timer=setTimeout(()=>{event.apply(this,args);},wait);};}代码很简单，就是在事件还在触发的时候，清空定时器，这样n秒后执行，但是这种写法第一次不会立即执行。第一次执行的第三个参数flag，判断是否立即执行functiondebounce(event,wait,flag){lettimer=null;返回函数(...args){clearTimeout(timer);if(!timer&&flag){event.apply(this,args);}else{timer=setTimeout(()=>{event.apply(this,args);},wait);}};}防抖场景窗口大小变化，调整Stylewindow.addEventListener('resize',debounce(handleResize,200));搜索框，输入1000毫秒后搜索debounce(fetchSelectData,300)；表单验证，输入1000毫秒后验证debounce(validator,1000)；防抖帝库的两个工具库都有防抖源码，可以参考。执行一个事件手写节流，因为是在固定时间内执行一次，所以我们有两种实现方式，一种使用时间戳，一种使用计时器时间戳函数throttle(event,wait){letpre=0;returnfunction(...args){if(newDate()-pre>wait){//当n秒内没有重复时pre=newDate();事件.apply（这个，args）；}};}虽然使用时间戳可以实现节流，但是最后一个事件不会执行定时器函数throttle(event,wait){lettimer=null;returnfunction(...args){if(!timer){timer=setTimeout(()=>{timer=null;event.apply(this,args);},wait);}};}Throttleusingtimer，虽然最后一次可以触发，但是第一次不会触发timestamp+timer解决第一次和最后一次都可以触发的问题，结合两个函数throttle(event,wait){让pre=0,timer=null;返回函数(...args){if(newDate()-pre>wait){clearTimeout(timer);定时器=空；pre=newDate();事件。应用（这个，参数）；else{timer=setTimeout(()=>{event.apply(this,args);},等待）;}};}油门场景滚动scrollwindow.addEventListener('scroll',throttle(handleScroll,200));输入动态搜索限制（fetchInput，300）；节流帝国图书馆lodash-throttleunderscore-throttle总结防抖：只执行最后一个事件继续触发，但在事件停止触发后n秒后才执行该功能。节流：控制执行频率。持续触发，每n秒执行一次功能对比图：在线demo（司徒正妹的demo）：防抖节流参考资料awesome-coding-js防抖节流场景及应用功能防抖与功能节流系列文章UnderstandingJavaScript--开头深入理解JavaScript--什么是JavaScript深入理解JavaScript--JavaScript是由什么组成深入理解JavaScript--一切都是对象深入理解JavaScript--对象（object）中-深入理解JavaScript--JavaScript有什么新东西——Object.create深入理解JavaScript——复制的秘密深入理解JavaScript——Prototype深入理解JavaScript——Inheritance深入理解JavaScript——JavaScript中的始祖深入理解JavaScript——instanceof——寻祖深入理解JavaScript——Function深入理解ingofJavaScript——Scope深入理解JavaScript——this关键字深入理解JavaScript——call,apply,bindwill深入理解JavaScript——立即执行函数（IIFE）深入理解JavaScript——词法环境深入理解JavaScript——执行上下文和调用栈深入理解JavaScript——ScopeVS执行上下文深入理解JavaScript——闭包深入理解JavaScript——防抖和节流-深入理解JavaScript——函数式编程深入理解JavaScript——垃圾收集机制深入理解JavaScript——数组深入理解JavaScript——循环来这里深入理解JavaScript——字符串
