防抖与节流

一、防抖(debounce)

1. 作用

在规定的时间内多次调用同一函数，只执行最后一次函数调用。

2. 分析

函数在调用的时候，套一个定时器，如果在延时期间再次调用，则清除上一次的定时器，开启这次定时器。

3. 函数

防抖函数有两个参数：一个是进行防抖操作的函数fn，另一个是延时delay。

  function debounce(fn, delay) {
     let timer = null;// 初始化定时器
     // 返回一个经过防抖处理的函数，...args剩余参数，可以把不定数量的参数放在args里
     return function(...args) {
        if (timer) clearTimeout(timer); // 如果定时器存在，则清除定时器
        // 给定时器赋值
        timer = setTimeout(() => {
          fn.apply(this, args); // 修正this的指向
          timer= null; // 函数执行完后初始化定时器
        },delay)
     }
  }

二、节流(throttle)

1. 作用

在规定的时间内多次调用同一个函数，只执行第一次函数调用，也可以理解为每隔规定的时间，相同的函数才会执行一次。

2. 分析

函数调用的时候，套一个定时器，如果在延时期间再次调用，则本次函数调用直接返回，上次的定时器延时到了之后会执行上一次函数调用。

3. 函数

节流函数有两个参数，一个是进行节流操作的函数fn，另一个是延时delay。

  function throttle(fn, delay){
     let timer = null; // 初始化定时器
     // 返回一个经过节流处理的函数
     return function (...args){
       if(timer) return; // 如果定时器存在，则直接返回
         // 给定时器赋值
        timer = setTimeout(() => {
          fn.apply(this, args); // 修正this的指向
          timer = null; //  函数执行完后初始化定时器
        },delay);
     }
  }

三、总结

1.异同点

防抖函数和节流函数从结构上来看，基本算是一模一样的，不同的是防抖函数在定时器存在时，是清除上一个定时器继续执行，而节流函数在定时器存在时，本次函数调用直接返回。还有一个关键点是它们都用到了闭包，有了闭包，可以把定时器限定在函数内部，在需要对不同函数进行防抖节流处理时，不会被其他定时器影响到。

2.应用场景

① 防抖：

搜索框的联想功能，窗口调整大小等

② 节流：

高频点击表单提交按钮，计算鼠标的位置等