Vue2 封装全局防抖节流函数

文章介绍了如何在Vue项目中封装防抖(debounce)和节流(throttle)函数,用于优化频繁触发的事件处理,提高性能。这两个函数通过设置定时器来控制函数的执行频率,debounce确保在设定时间间隔内只执行最后一次操作,而throttle则保证在设定时间内只执行一次。

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

1、 封装utils.js

let timeout = null
let timer, flag
/**
 * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {params} params 函数传参
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
function debounce(func, params, wait = 500, immediate = false) {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout)
    // 立即执行,此类情况一般用不到
    if (immediate) {
        var callNow = !timeout
        timeout = setTimeout(function () {
            timeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func(params)
    } else {
        // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function () {
            typeof func === 'function' && func(params)
        }, wait)
    }
}
/**
 * 节流原理:在一定时间内,只能触发一次
 * 
 * @param {Function} func 要执行的回调函数 
  * @param {params} params 函数传参
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, params, wait = 500, immediate = true,) {
    if (immediate) {
        if (!flag) {
            flag = true
            // 如果是立即执行,则在wait毫秒内开始时执行
            typeof func === 'function' && func(params)
            timer = setTimeout(() => {
                flag = false
            }, wait)
        }

    } else {
        if (!flag) {
            flag = true
            // 如果是非立即执行,则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func(params)
            }, wait)
        }
    }
}
export default {
    install(Vue) {
        Vue.prototype.$debounce = debounce
        Vue.prototype.$throttle = throttle
    }
}

2、 main.js 注册

import utils from '@/utils/instruction'

//全局防抖函数
Vue.use(utils)

3、 组件调用

//fun 控制函数
//params传递参数
//时间
//第四个布尔参数标识是否立即执行
<button @click="$throttle(fun, params,1000,false)" type="primary"><a-icon type="check-circle" />保存
  </button>

注:节流防抖函数使用的为uview官方api代码,稍作传参修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值