在vue项目使用防抖、节流

  下面这是我的项目目录结构，在utils文件夹下面创建common.js，这个js文件我用来存放一些常用的函数、方法等等，暂时先添加了防抖、节流函数。
  当然这个也不一定就要放在utils文件夹下面，引入的时候，引入对应的文件路径就行

common.js

/**
* @function 防抖函数，规定时间内点击多次，只执行最后一次
* @method debounce(fn,delay);
* @param {function} fn       需要执行的函数
* @param {number} [delay=300]     等待时间（毫秒）,默认等待时间为300毫秒,为0的话就不需要防抖函数了
* @example 
  const func = () => {
      console.log("1234567");
  };
  const dianji = debounce(func, 500);
*/

const debounce = (fn, delay = 300) => {
  let timer = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    // 再次执行的时候把前一个 setTimeout clear 清空掉
    clearTimeout(timer);
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
    // timer = setTimeout(fn, delay) // 简化写法
  };
}

/**
* @function 节流函数，连续点击多次，规定时间内只执行一次
* @method throttle(fn,delay);
* @param {function} fn       需要执行的函数
* @param {number} [delay=300]     等待时间（毫秒）,默认等待时间为300毫秒
* @example 
  const func = (aa) => {
      console.log(aa);
  };
  const dianji = throttle(()=>{func("12345")}, 500);
*/

const throttle = (fn, delay = 300) => {
  let timer = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    // 判断timer标记是否为null,只有为null时才让他执行一次里面的函数
    if (!timer) {
      // 将外部传入的函数的执行放在setTimeout中
      timer = setTimeout(() => {
        // 调用传入的函数fn
        // 最后在setTimeout执行完毕后再把标记timer设置为null,表示可以执行下一次循环了。
        fn.apply(this, arguments);    //或者使用fn()
        timer = null;
      }, delay);
    }
  };
}

export { debounce, throttle }  //可解构

export default { throttle, debounce } //不可解构

在需要使用的组件里使用（fangdou.vue）

<template>
  <div>
    <div style="padding: 100px">
      <button @click="dianji">防抖和节流</button>
    </div>
  </div>
</template>

<script>
// // vue2.0写法
// import { throttle, debounce } from "@/utils/common.js";
// export default {
//   methods: {
//     // 防抖方法
//     dianji() {
//       debounce(this.func, 1000);
//       // throttle(this.func, 1000);
//       console.log(11111);
//     },
//     func() {
//       console.log("ssssswdsa");
//     },
//   },
// };
</script>

<script setup>
// vue3.0写法(使用vite2.0构建的项目)
// import { throttle, debounce } from "@/utils/common.js";		//解构引用
import JM from "@/utils/common.js";		//作为整体引入

const func = () => {
  console.log("ssssswdsa");
};

const dianji = JM.debounce(()=>{
	func();
}, 500);
//const dianji = JM.throttle(func, 500);

</script>


<style>
</style>