vue防抖

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

转载最新推荐文章于 2025-06-30 20:00:00 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.cn/post/6844904159578161159#heading-1

文章标签：

#vue

本文探讨了如何在全局和组件内部使用 debounce 函数，通过实例展示了两种常见写法，并重点讲解了如何在组件中正确管理定时器，以优化性能和用户体验。

链接

timer 可以放在data里也可以放在挂在全局里这儿是放在全局

在这里插入图片描述

第二种写法 `utils`中的写法

在这里插入图片描述

export function debounce(func, wait, immediate) {
    var timer;
    return function () {
        var _this = this;

        if (timer) clearTimeout(timer);
        if (immediate) {
            let callNow = !timer;
            timer = setTimeout(function () {
                timer = null;
            }, wait)
            if (callNow) this[func]()
        } else {
            timer = setTimeout(function () {
                this[func]()
            }, wait);
        }
    }
}