Vue 揭秘函数防抖和节流，书写轻便、执行高效

2024-01-07 02:46:52

函数防抖和节流简介

函数防抖（debounce） ：当一个函数在一定时间内被多次触发，防抖可以确保它只执行一次。也就是说，如果在规定时间内函数被重复触发，那么只有最后一次触发才会执行函数。防抖通常用于处理用户交互事件，比如滚动、键盘输入等。

函数节流（throttle） ：与防抖不同，节流函数在一定时间内只执行一次，即使它被多次触发。换句话说，函数在指定时间间隔内只允许执行一次，无论在这段时间内它被触发多少次。节流常用于处理高频触发的事件，比如滚动、鼠标移动等。

Vue中的函数防抖和节流

Vue提供了一个内建的方法_.debounce，它可以轻松实现函数防抖。_.debounce方法接受两个参数：函数和等待时间。函数就是需要防抖的函数，等待时间则是防抖的延迟时间，单位是毫秒。

import {debounce} from 'vue'

const handleClick = () => {
  // 执行函数的逻辑
}

const debouncedHandleClick = debounce(handleClick, 300)

// 将防抖后的函数绑定到事件处理函数上
@click="debouncedHandleClick"

对于函数节流，Vue没有提供直接支持。但我们可以使用setTimeout和clearTimeout方法来实现。

let timer = null

const handleThrottle = () => {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    // 执行函数的逻辑
    timer = null
  }, 300)
}

// 将节流后的函数绑定到事件处理函数上
@click="handleThrottle"