vue 中使用防抖和节流，防止重复点击或重复上拉加载

最新推荐文章于 2025-06-30 20:00:00 发布

FiveBigNiu

最新推荐文章于 2025-06-30 20:00:00 发布

阅读量1.7w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue.js javaScript

本文链接：https://blog.youkuaiyun.com/qq_34764577/article/details/82952368

javaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue.js

6 篇文章

订阅专栏

本文详细介绍了JavaScript中函数防抖（Debounce）和节流（Throttle）技术的实现原理与应用方法，通过具体代码示例展示了如何在实际项目中使用这两种技术来优化用户体验，减少不必要的函数调用，提高应用程序的性能。

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

/**
 * 函数防抖 (只执行最后一次点击)
 * @param fn
 * @param delay
 * @returns {Function}
 * @constructor
 */
export const Debounce = (fn, t) => {
    let delay = t || 500;
    let timer;
    console.log(fn)
    console.log(typeof fn)
    return function () {
        let args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay);
    }
};
/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Throttle = (fn, t) => {
    let last;
    let timer;
    let interval = t || 500;
    return function () {
        let args = arguments;
        let now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(this, args);
            }, interval);
        } else {
            last = now;
            fn.apply(this, args);
        }
    }
};

用法

...
methods:{
	getAliyunData:Throttle(function(){
	...
	 },1000),
}
...