JavaScript防抖函数执行多个事件处理函数，监听浏览器窗口拖拽事件（Vue防抖函数执行多个事件处理函数）

前言

当用户调整浏览器窗口大小时，浏览器会触发 resize 事件。通常，我们希望在窗口大小改变时执行一些操作，但是如果用户频繁调整窗口大小，可能会导致这些操作被频繁触发，影响页面性能和用户体验。这时候，防抖函数就派上了用场， 这里来分享防抖在Vue中的应用，记录一下

一. 防抖介绍

        防抖函数：就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行。

---

二. 局部使用

1. 定义方法

首先，我们在方法中定义防抖函数，请看，

//定义防抖函数
debounce(func, wait) {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        const later = function () {
          timeout = null;
          func.apply(context, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
},

2. 直接使用

然后，可以直接在页面需要的地方使用，

//mounted() {

    window.addEventListener(
      "resize",
      this.debounce(() => {
        this.initCanvas();
        this.getImage();
      }, 5000)
    ); // 5000 毫秒即 5 秒

//},

可以看到，给window窗口添加了 resize 监听事件，5秒执行一次。

---

三. 全局使用

1. 新建文件

在utils文件中，新建debounce.js文件

// 防抖函数
export default function debounce(func, wait) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        const later = function () {
            timeout = null;
            func.apply(context, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

2. 引入注册

import debounce from '@/utils/debounce';

// 在 Vue 原型上挂载全局 $debounce 方法
Vue.prototype.$debounce = debounce;


^
这里二选一
V


// 或者在初始化阶段挂载
new Vue({
  el: '#app',
  beforeCreate() {
    //在这里将防抖函数添加到Vue原型上，方便调用
    Vue.prototype.$debounce = debounce;
  },
  router,
  store,
  render: h => h(App)
})

3. 全局调用

created() {
    // 在 created 生命周期中初始化防抖函数，只执行一次
    this.debounceOnChange = this.$debounce(() => {
      console.log(123);
      this.$bus.$emit("RealTimeEvent");
      this.delayScaleFlag = false;
    }, 3000); // 防抖时间设定为 2000ms
},
// 事件触发时调用
onRealTimeChange(value) {
      if (value) {
        // 调用已经包装好的防抖函数
        this.debounceOnChange();
      }
},

这里必须将 debounceOnChange存储在组件的 data 中，这样它的值可以在方法调用之间保持不变。因为防抖函数在每次调用 onRealTimeChange 时创建了一个新的防抖实例。为了确保防抖函数在组件内保持唯一的计时器实例，你需要将 debounce 包装好的函数保存起来，而不是每次点击时都重新创建一个新的防抖函数。

下面这样是错误演示

onRealTimeChange(value) {
      console.log(value, "实时");

      // 如果值存在，执行防抖后的逻辑
      if (value) {
        // 使用全局防抖方法来包装你的业务逻辑
        this.$debounce(() => {
          this.$bus.$emit("RealTimeEvent");
          this.delayScaleFlag = false;
        }, 300)(); // 300ms防抖时间，调整根据需求
      }

}