【前端性能优化】节流与防抖

Love The Way You Lie 2023-02-28 15:18 1阅读 0赞

### 目录 ###

*   *   *  1. 什么是防抖与节流？
         *  2. 防抖的实现
         *   *  2.1 非立即执行
             *  2.2 立即执行
         *  3. 节流的实现
         *   *  3.1 时间戳
             *  3.2 定时器
             *  3.3 两者合并
         *  4. 使用场景

### 1. 什么是防抖与节流？ ###

在开发过程中，我们会遇到使用一些持续触发的事件，如`resize`，`scroll`，`mousemove`等，如果在持续触发的过程中一直调用函数，那么就会造成资源的浪费，要解决这个问题，就需要用到节流与防抖。

所谓的**防抖**，就是指触发事件后n秒后才执行事件处理函数，如果在n秒内又触发了事件，就会重新计时。

所谓的**节流**，就是指连续触发的事件，在指定时间间隔内只会执行一次函数，节流会减少函数的执行频率。

### 2. 防抖的实现 ###

防抖函数有两个版本：立即执行版和非立即执行版

#### 2.1 非立即执行 ####

// fu 是需要执行的函数 
    // wait 是需要的等待的事件，单位是毫秒(ms)
    // timeout 用来存放定时器的返回值
    function debounce(fn, wait){ 
      let timeout = null
      return function(){ 
        let context = this;
        let args = arguments;
        if(timeout){ 
          clearTimeout(timeout)
        }
        timeout = setTimeout(() => { 
           fn.apply(context, args);
        },wait);
      }
    }

在这个函数中：

*  arguments：用来获取函数的参数值，而在DOM事件操作中，会给回调函数传递一个event参数，这样可以使用arguments后来获取event属性
 *  this指向：事件的回调函数是防抖函数返回的闭包函数，但是由于setTimeout是异步操作，在非严格模式下，事件的处理函数执向的是window，所以我们需要改变事件处理函数的this指向，来使this指向DOM对象，这里使用apply来改变指向。

#### 2.2 立即执行 ####

// fu 是需要执行的函数 
    // wait 是需要的等待的事件，单位是毫秒(ms)
    // timeout 用来存放定时器的返回值
    // immediate 是否立即执行，true立即执行，false，非立即执行
    function debounce(fn, wait,immediate){ 
      let timeout = null
      return function(){ 
        let context = this;
        let args = arguments;
        if(timeout){ 
          clearTimeout(timeout)
        }
        let callNow = !timeout;        
        if (immediate) {                  
          timeout = setTimeout(function() {             
            timeout = null;          
          }, wait);          
          if (callNow){  
            fn.apply(context, args);
          }        
        } else {           
          timeout = setTimeout(function() {             
            fn.apply(context, args);          
          }, wait);        
        }
      }
    }

### 3. 节流的实现 ###

对于节流函数，有两种实现方式：**时间戳版**和**定时器版**

#### 3.1 时间戳 ####

使用事件戳，事件触发之后，事件处理函数就会立即执行。

// fun 是需要执行的函数 
    // wait 是需要的等待的事件，单位是毫秒(ms)
    // prev 表示开始的时间
    // now 表示当前的时间
    function throttle (fun, wait){ 
      let prev = 0
      return function(){ 
        let now = Date.now()
        let context = this
        let args = arguments
        if(now - prev >= wait){ 
          fun.apply(context, args)
          prev = now
        }
      }
    }

在连续触发事件的过程中，函数会立即执行并且每隔n秒执行一次。

#### 3.2 定时器 ####

使用定时器，事件触发之后，事件处理函数不会立即执行，而是等定时器时间过后才会执行。

// fu 是需要执行的函数 
    // wait 是需要的等待的事件，单位是毫秒(ms)
    // timeout 用来存放定时器的返回值
    function throttle (fun, wait){ 
      let timeout = null
      return function(){ 
        let context = this
        let args = arguments
        if(!timeout){ 
          timeout = setTimeout(() => { 
            fun.apply(context, args)
            timeout = null 
          }, wait)
        }
      }
    }

在触发事件的时候，设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行函数，知道wait之间后，才执行函数，并且清空定时器。

#### 3.3 两者合并 ####

在节流中使用定时器和时间戳都可以，我们也可以将两者合并，来更精确的实现函数的节流。**当第一次触发事件时马上执行事件处理函数，最后一次触发事件后还会执行一次事件处理函数。**

// fu 是需要执行的函数 
    // wait 是需要的等待的事件，单位是毫秒(ms)
    // timeout 用来存放定时器的返回值
    // startTime 是开始时间
    // curTime 是当前的时间
    // remaining 剩余时间
    function throttle (fun, wait){ 
      let timeout = null
      let startTime = Date.now()
      return function(){ 
        let curTime = Date.now()
        let context = this
        let args = arguments
        let remaining = wait - (curTime - startTime)
        if(timeout){ 
          clearTimeout(timeout)
        }
        if (remaining <= 0) { 
          fun.apply(context, args);
          startTime = Date.now();
        } else { 
          timeout = setTimeout(fun, remaining);
        }
      }
    }

`remaining` 表示剩余的时间，当`remaining`小于0的时候，说明该执行事件处理函数了。

### 4. 使用场景 ###

**防抖的使用场景：**

*  有一个输入框，再输入之后，会调用接口，获取联想词。但是如果我们每次输入一个字，而不确定用户是否还继续输入，就调用接口，就会造成资源的浪费，这时我们就可以是用防抖，当用户输入完一定时间之后再调用接口，显示联想词。

**节流的使用场景：**

*  在使用懒加载的时候，需要计算滚动条的位置，使用节流可以按照一定的时间来获取。
 *  用户在点击按钮进行提交时候，如果我们知道接口返回结果的情况下，就可以使用节流，只允许在一定的时间之内提交一次。