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

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

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

这里我们使用防抖函数来监听浏览器窗口拖拽事件：

//定义防抖函数
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);
      };
},

然后直接调用：

//mounted() {

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

//},

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