基于Vue3内置的lodash函数库实现防抖节流

时间:2024-10-04 07:22:04

前言

防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数,调用方式都差不多。

防抖:在一定时间内,多次触发同一事件,只执行最后一次操作,常用于输入框搜索、滚动加载等场景。

节流:在一定时间内,多次触发同一事件,限制函数执行频率,防止函数被频繁调用,从而提高页面性能。

一、基于Vue3内置的lodash函数库实现防抖节流

(1)导入lodash函数库的防抖和节流方法

import { debounce, throttle } from 'lodash'

(2)写两个按钮

<el-button size="small" type="primary" @click="handleDebounceClick($event)">
  <el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon>
  <small>防抖·篮球</small>
</el-button>

<el-button size="small" type="primary" @click="handleThrottleClick($event)">
  <el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon>
  <small>节流·足球</small>
</el-button>

(3)写两个方法

/**
 * 防抖·篮球
 */
const handleDebounceClick = debounce((evt) => {

  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {

    console.log('debounce =>', evt)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

/**
 * 节流·足球
 */
const handleThrottleClick = throttle((evt) => {

  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {

    console.log('throttle =>', evt)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

(4)防抖节流的实现方法

/**
 * 防抖
 */
const debounce = (fn, time) => {

  let timer = null
  return (...args) => {

    const context = this
    if (timer) {

      clearTimeout(timer)
    }
    timer = setTimeout(() => {

      fn.call(context, ...args)
    }, time)
  }
}

/**
 * 节流
 */
const throttle = (fn, time) => {
  
  let activeTime = null
  return (...args) => {
   
    const context = this
    const current = Date.now()
    if (current - activeTime >= time) {
   
      fn.call(context, ...args)
      activeTime = Date.now()
    }
  }
}