vue防抖节流封装

 

dbucTrtl.js

// 防抖节流函数
function debounce(func, wait, immediate) {
    let timeout; // 定义一个计时器变量，用于延迟执行函数
    return function (...args) { // 返回一个包装后的函数
        const context = this; // 保存函数执行上下文对象
        const later = function () { // 定义延迟执行的函数
            timeout = null; // 清空计时器变量
            if (!immediate) func.apply(context, args); // 若非立即执行，则调用待防抖函数
        };
        const callNow = immediate && !timeout; // 是否立即调用函数的条件
        clearTimeout(timeout); // 清空计时器
        timeout = setTimeout(later, wait); // 创建新的计时器，延迟执行函数
        if (callNow) func.apply(context, args); // 如果满足立即调用条件，则立即执行函数
    };
}

// 节流函数
function throttle(func, wait) {
    let timeout; // 定义一个计时器变量，用于限制函数调用频率
    return function (...args) { // 返回一个包装后的函数
        const context = this; // 保存函数执行上下文对象
        if (!timeout) { // 如果计时器不存在
            func.apply(context, args); // 执行函数
            timeout = setTimeout(() => {
                timeout = null; // 清空计时器变量
            }, wait); // 创建计时器，在指定时间后重置计时器变量
        }
    };
}

export {
    debounce,
    throttle
}; // 导出防抖函数和节流函数


//https://mbd.baidu.com/ug_share/mbox/4a83aa9e65/share?product=smartapp&tk=ff3f48c4476e5a4df3150610b8930349&share_url=https%3A%2F%2Fyebd1h.smartapps.cn%2Fpages%2Fblog%2Findex%3F_swebfr%3D1%26blogId%3D131591322%26_swebFromHost%3Dbaiduboxapp&domain=mbd.baidu.com

 

main.js

// 引入防抖节流函数文件
import { debounce, throttle } from '@/utils/dbucTrtl.js';
// 在Vue实例上扩展全局方法
Vue.prototype.$debounce = debounce;
Vue.prototype.$throttle = throttle;

 

需要使用的页面index.vue，在created使用

<tui-button type="danger" height="88rpx" shape="circle" @click="submit">确定</tui-button>
created() {
    // 使用防抖函数处理点击事件
    this.submit = this.$debounce(this.submitHandleClick, 500);
    // 使用节流函数处理点击事件
     // this.throttledClick = this.$throttle(this.handleClick, 1000);
},
methods: {
　　submitHandleClick() {
　　　　console.log('点击了')
　　}
}