一.什么是函数防抖&节流

函数防抖

函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
函数节流(throttle):

当持续触发事件时，在规定时间段内只能调用一次回调函数。

如果在规定时间内又触发了该事件，则什么也不做,也不会重新计时，即使一直触发，也是每隔n秒执行一次回调
相同点/不同点

相同:都是限制回调函数调用频率，避免大量计算导致的页面卡顿.

不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行一次回调函数.

二.为什么需要函数防抖&节流

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

在例如回调函数里面代码块比较沉重时，这样频繁触发，就会大大降低性能了

除此之外，短时间内重复的 ajax 调用不仅会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力，显然这个问题也是需要解决的

三.函数的防抖

防抖的思路

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码

既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

防抖代码实现

function debounce(fn, delay) {
   // 创建一个标记用来存放定时器的返回值
   var timer = null;
   return function (e) {
       // 每当用户输入的时候把前一个 setTimeout clear 掉
       clearTimeout(timer);
       // 然后又创建一个新的 setTimeout,
       // 样就能保证interval 间隔内如果时间持续触发，
       // 就不会执行 fn 函数
       timer = setTimeout(() => {
         //这个this的修正是为了handle函数里面的this指向事件侦听对象，就是docment元素，
         //如果不修正handle函数中的this就指向window
         //还有这个arguments 是为了参数 e 穿到handle函数中
         fn.apply(this, arguments); 
       }, delay);
   };
}

// 处理函数
function handle(e) {
  this.style.color="red";
 console.log(this);
 console.log('防抖：', Math.random());
}

var bn=document.querySelector("button");
bn.addEventListener("click",debounce(handle, 500));

应用场景

函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：
两个条件:
- 如果客户连续的操作会导致频繁的事件回调(可能引起页面卡顿).
- 客户只关心"最后一次"操作(也可以理解为停止连续操作后)所返回的结果.
例如：
1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
2. 用户名、手机号、邮箱输入验证；
3. 给按钮加函数防抖防止表单多次提交
4. 按钮点击:收藏,点赞,心标等

四.函数的节流

节流的思路

第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。

当第一次的定时器执行完函数最后会设定变量为flase。

那么下次判断变量时则为flase，函数会依次运行

节流代码的实现

function throttle(fn, delay = 100) {
           //首先设定一个变量，在没有执行我们的定时器时为null
           let timer = null;
           return function () {
               //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
               if (timer) return;
               timer = setTimeout(() => {
                   fn.apply(this, arguments);
                   timer = null;
               }, delay);
           }
       }

// 处理函数
function handle(e) {
 console.log(this);
 console.log('节流：', Math.random());
}

var bn = document.querySelector("button");
bn.addEventListener("click", throttle(handle, 500));

应用场景
两个条件:
- 客户连续频繁地触发事件
- 客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反.
例如：

1.onscroll滚动时候的

2.游戏中的刷新率
3.DOM元素拖拽

js-函数节流和防抖

js-函数节流和防抖

一.什么是函数防抖&节流

二.为什么需要函数防抖&节流

三.函数的防抖

四.函数的节流