Vue2.0、Vue3.0节流

节流：一段时间内只能执行一次
意思：就是控制时间戳来达到第一次点击有效果后，下次点击必须在一定时间后才能再次点击有效果；
核心思路：使用时间戳来实现；

首先封装节流函数：
我们这里不需要考虑this指向，统一使用箭头函数：

/**
 * @param {*} awaitTime 时间戳 定时器时间毫秒数
 * @param {*} fun 传入的函数
 * @param {*} arrAgu 传入的函数的参数
 */
const stopUpDownFunList = (awaitTime=2000) => {
    let startTimer = 0;
    //节流  一段时间只能执行一次 使用时间戳控制
    const retrunStopUpDown =  (fun, ...arrAgu) =>{
        if (typeof fun !== 'function') return
       let endTimer = new Date().getTime()
        if (endTimer - startTimer > awaitTime) {
            fun( ...arrAgu)
            startTimer = new Date().getTime()
        }
    }
    return retrunStopUpDown
}
export default stopUpDownFunList

vue2页面：

<template>
  <div>
    <el-button @click="getchange('wo','shi','zjq','hhhh')" type="primary">getchange</el-button>
  </div>
</template>

<script>
import stopUpDownFunList from "../assets/stopUpDown";
let stopUpDownFun = stopUpDownFunList();

export default {
  data() {
    return {
      zjq: "88888888"
    };
  },

  mounted() {},
  methods: {
    getchange(...aguList) {
      stopUpDownFun((...data) => {
        console.log(666);
        console.log(...data);
        console.log(this.zjq);
        this.getchange2();
      }, ...aguList);
    },
    getchange2() {
      console.log("%c成功调用getchange2函数",'color:red');
    }
  }
};
</script>

其实上面的代码做了两件事，引入节流函数，页面按钮加点击事件。
1：首先使用es6的形式引入我们函数模块，封装的时候使用了闭包的形式，所有我们需要提前调用一下，使用他的返回函数作为我们真正要用的函数stopUpDownFun；
2：点击页面按钮，会执行methods里面的getchange函数，并且接收到了参数，aguList使用剩余参数的形式来接收，在getchange函数中调用stopUpDownFun函数，stopUpDownFun函数第一个参数是一个函数，也就是我们真正的业务逻辑函数，第二个参数就是该业务逻辑函数需要的参数；
3：在stopUpDownFun函数内部，使用时间戳的形式来控制业务逻辑函数是否执行；
4：业务逻辑函数使用箭头函数的形式来保证this的正确指向。

vue3页面：

<template >
  <span @click="getCaptchaCode('aaa','bbb','ccc')" class="codeSpan" v-html="code"></span>
</template>
<script>
import stopUpDownFunList from "@/stopUpDown.js";
import axios from "@/axios";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
export default {
  setup(props) {
    let code = ref();
    onMounted(() => {
      getCaptchaCode();
    });
    const stopUpDownFun = stopUpDownFunList();
    const getCaptchaCode = (...arrAgu) => {
      stopUpDownFun((...data) => {
        console.log("%c下面是传递过来的参数", "color:red");
        console.log(...data);
        // //...业务逻辑
        axios.get("getCaptchaCode").then(res => {
          res.code === "200" && (code.value = res.data.code);
          ElMessage.success({
            message: "验证码获取成功",
            type: "success"
          });
          localStorage.setItem("token", res.data.token);
        });
      }, ...arrAgu);
    };
    return { getCaptchaCode, code };
  }
};
</script>