节流：一段时间内只能执行一次
意思：就是控制时间戳来达到第一次点击有效果后，下次点击必须在一定时间后才能再次点击有效果；
核心思路：使用时间戳来实现；
首先封装节流函数：
我们这里不需要考虑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>
