是什么

防抖和节流两者类似【但并不一样】是用来控制某一函数在特定时间内执行次数的技术点。

什么时候重要

在给Dom绑定事件的时候显得尤为重要，因为相当于在事件函数和Dom之间加了一层控制层。

为什么重要

因为有时候我们无法控制DOM事件的触发频率，因为它是变化的。举个例子，scroll事件，当你用触控板，鼠标滚轮，或者拖动滚动条的时候，scroll事件大概每秒会触发30次，或者更多次。但是当你在移动设备上滚动屏幕时，这个事件有可能每秒触发100次 ，甚至更多。

防抖 Debounce

防抖这个技术点允许我们将多个相似的调用分成一组，或者可以理解为多个相同的事件最后只执行一次。

Raw events 原始事件有可能触发多次，Debouce 后的事件，只触发一次。假设你在一个电梯中，电梯门即将关闭，这时突然又有一个人要进来，电梯并没有上升，而是又打开了门，电梯延迟了它上升的这个动作，但是运送了更多的人，这样就相当于优化了资源。

简单实现

//防抖debounce代码：function debounce(fn) {    let timeout = null; // 创建一个标记用来存放定时器的返回值    return function () {        // 每当用户输入的时候把前一个 setTimeout clear 掉        clearTimeout(timeout);         // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数        timeout = setTimeout(() => {            fn.apply(this, arguments);        }, 500);    };}// 处理函数function handle() {    console.log(Math.random());}// 滚动事件window.addEventListener('scroll', debounce(handle));

节流

节流是限制函数在某段时间内只能执行一次，或者说每隔一段时间执行一次。其跟防抖的主要区别在于 保证了函数是有规律的执行，每xx毫秒执行一次。

节流函数的实现原理是，将即将被执行的函数用定时器延时一段时间后执行。如果本次延时执行还没有完成，则忽略调用函数的请求。节流函数接受两个参数，第一个是 需要被延时执行的函数，第二个是需要延迟的时间。

var throttle = function(fn,interval){  var __self = fn,timer,firstTime=true;  return function(){    var args = arguments,        __me = this;        // 如果是第一次执行，则无需延迟       if(firstTime){          __self.apply(__me,args); // 执行函数fn          return firstTime = false;      //  设置firstTime = false                           }       if(timer){  // 如果定时器还在，说明前一次延迟执行还没有完成         return false;       }       timer = setTimeout(function(){         clearTimeout(timer);         timer = null;         __self.apply(__me,args);       },interval || 500)  }}window.onresize = throttle(function(){  console.log('test')},1000);

一个可以区分两者的场景  

无限滚动加载

当页面滚动到底部的时候，需要取判断页面距离底部的距离去判断是否需要发送请求获取数据。这个时候用防抖(debounce)就不合适了，因为它只在停止滚动的时候触发。这个时候使用节流(throttle)就可以随时的获取页面距离底部的距离，来判断是否需要发送请求，获取更多的数据。

相关库

• lodash

• underscore

除了这两个之外，还有一个方法实现类似的技术点 requestAnimationFrame

以上是关于防抖，节流的知识点，欢迎关注，点赞，转发，评论。。。

关注我 一起回忆 《javaScript高级程序设计》《javaScript设计模式中》你没注意过的细节  重要的是一起成长