防抖和节流工具类的封装

1. 防抖和节流概述

对于防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。具体效果是，如果我们高频率地触发该事件，函数执行会被一直延迟，在最后一次触发事件的n秒后该函数会被执行一次。

对于节流，就是不管触发事件的频率如何，函数在n秒内最多执行一次。具体效果是，如果我们持续高频率地触发该事件，该函数的执行频率会接近n秒钟一次。

2. 工具类封装

防抖类和节流类代码如下：
类的使用非常简单，在构造方法中传入事件处理函数和时间间隔数值，生成防抖或节流对象，在每次事件触发时调用该对象的excute()方法，事件处理函数就会自动按照防抖或节流的方式执行。

// 防抖
export class Debounce{
  private timeout:number
  private task:() => void
  private setTimeoutId:any = 0
  constructor(task:() => void, timeDelay:number){
    this.setTimeoutId
    this.task = task
    this.timeout = timeDelay
  }
  public excute(){
    clearTimeout(this.setTimeoutId)
    this.setTimeoutId = setTimeout(() => {
      this.task()
    }, this.timeout);
  }
}

// 节流
export class Throttle{
  private timeout:number
  private task:() => void
  private setTimeoutId:any = 0
  private ok = true //是否执行
  constructor(task:() => void, timeDelay:number){
    this.setTimeoutId
    this.task = task
    this.timeout = timeDelay
  }
  public excute(){
    if(this.ok){
      this.task()
      this.ok = false
      setTimeout(() => {
        this.ok = true
      }, this.timeout);
    }
  }
}

3. 使用样例

3.1 数字增加，防抖和节流

效果图：

vue模板代码如下：

<template>
  <div>
    <div>
      数字：{{ num }}
    </div>
    <button @click="debounceAdd.excute()">防抖，数字加一</button>
    <button @click="throttleAdd.excute()">节流，数字加一</button>
  </div>
</template>

ts代码如下：

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import {Debounce, Throttle} from '../../util/excuteFunc'
const num = ref(1)
const debounceAdd = new Debounce(add, 1000)
const throttleAdd = new Throttle(add, 1000)
function add(){
  num.value++
}
</script>

3.2 监听resize事件，防抖

监听浏览器窗口变化，如果窗口大小发生变化后一秒内没有再次发生变化，那么执行处理窗口大小变化的代码。

不使用防抖的代码：

window.onresize = function(e){
  console.log('窗口大小发生了变化，resize事件对象为：')
  console.log(e)
}

使用防抖的代码：

let debounceResizeHandler:Debounce
window.onresize = function(e){
  if(!debounceResizeHandler){
  	//如果还未初始化防抖对象，则初始化防抖对象
    debounceResizeHandler = new Debounce(() => {
      // 处理窗口大小变化的代码
      console.log('窗口大小发生了变化，resize事件对象为：')
      console.log(e)
    }, 1000)
  }
  debounceResizeHandler.excute()
}

主流的防抖节流写法

上面返回防抖和节流对象的写法好像很少见，目前大家都喜欢用的还是返回一个防抖和节流的函数。

export function ToDebounce(fn:Function, timeout:number){
  let id = 0
  return function(...args:any[]){
    clearTimeout(id)
    id = setTimeout(() => {
      fn(...args)
    }, timeout);
  }
}

export function ToThrottle(fn:Function, timeout:number, ...args:any[]){
  let id = 0
  let excute = true // 是否可以执行函数
  return function(...args:any[]){
    if(excute){
      fn(...args)
      excute = false
      setTimeout(() => {
        excute = true
      }, timeout);
    }
  }
}