Vue 3 防抖与节流实现及应用-CSDN博客

本文介绍了Vue 3中如何实现防抖和节流技术，这两种技术常用于优化高频率触发的事件处理。防抖确保在事件停止触发后才执行后续代码，而节流则限制了函数的执行频率，规定一定时间内只允许执行一次。在Vue 3和Vite项目中，可以封装防抖和节流函数并按需导入使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法，当你点击一个事件操作停止后才运行后面代码。

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率，规定你在事件触发一段时间内，只允许执行一次。

vue3 ，vite 项目中

对防抖节流进行封装

// 节流
export  const throttle=(fn, time)=> {
    let timer: any = null
    time = time || 1000
    return function(...args) {
        if (timer) {
            return
        }
        const _this = this
        timer = setTimeout(() => {
            timer = null
        }, time)
        fn.apply(_this, args)
    }
}

// 防抖
export const debounce=(fn, time)=> {
    time = time || 200
    // 定时器
    let timer: any = null
    return function(...args) {
        const _this = this;
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function() {
            timer = null
            fn.apply(_this, args)
        }, time)
    }
}

在你需要调用页面先import引入，就可以成功啦

<script setup>
import {throttle,debounce} from '@/utils/throttle'
// 节流
const btnClick=throttle((e) => {
  console.log('节流')
}, 1500)
// 防抖
const btnClick2=debounce((e) => {
  console.log('防抖')
}, 1000)
</script>