Vue2自定义防抖函数

最新推荐文章于 2025-07-22 15:26:59 发布

原创最新推荐文章于 2025-07-22 15:26:59 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue2中创建一个自定义的防抖函数，用于限制函数的频繁调用。通过示例代码展示了防抖函数的实现细节和使用方法，帮助开发者优化用户体验，防止因频繁操作导致的性能问题。

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

Vue2自定义防抖函数

1、代码

// 防抖函数
export function debounce (delayTime) {
    let currentTime = new Date().getTime();
    if (currentTime - this.currentDelayTime > delayTime) {
      this.submit();
    } else {
      console.log("操作频繁");
    }
    this.currentDelayTime = currentTime
}

2、使用方法

// 防抖函数的使用
// 1、导入防抖函数
import { debounce } from "存放路径";

// 2、在响应式数据中声明记录当前时间的值(默认赋值为延迟时间)currentDelayTime

// 3、调用函数，传递防抖间隔时间(以2000为例)
debounce(2000){
    // 当前时间
    let currentTime = new Date().getTime();
    // 当前时间减去被记录的当前时间大于延迟时间
    if (currentTime - this.currentDelayTime > 2000) {
      // 调用执行函数
      this.submit();
    } else {
      // 控制台打印"操作频繁"
      console.log("操作频繁");
    }
    // 将当前时间赋值给记录时间的值
    this.currentDelayTime = currentTime
}