一看就会的防抖函数封装及使用，错过拍大腿

将防抖函数封装以便多次复用

export function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

debounce 函数返回一个新的函数，这个新函数可以被多次调用，并且在 wait 毫秒内只会执行一次原始函数 func。同时，新函数接收所有传入的参数，并且在执行原始函数时保留了 this 指向。这样就能够解决在 wait 毫秒内被同时调用多次的问题。

在页面引入

<template>
  <button @click="debounceClick">防抖按钮</button>
</template>
import { debounce } from './path/to/debounce.js';
export default {
  methods: {
    debounceClick: debounce(function () {
      // 这里定义需要防抖的函数
    }, 1000)
  }
}

将 debounce 函数作为一个方法来定义，并将其绑定到按钮的点击事件中。在 debounceClick 方法中，我们调用 debounce 函数并传入需要防抖的函数和等待时间，然后将返回的新函数赋值给 debounceClick 方法。这样，每次点击按钮时都会执行 debounceClick 方法，而 debounce 函数会确保在等待时间内只会执行一次传入的函数。

如有不足之出，望指正