vue使用防抖节流

vue使用防抖节流

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、防抖函数，规定时间内点击多次，只执行最后一次

二、节流函数，连续点击多次，规定时间内只执行一次

代码如下（示例）：

1.再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 } //不可解构

2.再单页面使用

代码如下（示例）：

<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>

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。