重复点击与频繁请求
前言
如果不限制重复点击,可能会造成业务混乱。 如果不限制频繁请求,可能后端服务器会承受不住。- 节流函数:一段时间能只执行第一次点击
- 按钮禁用或加载中:禁用的样式!和禁用是否确实达到效果?之前有遇到失效?
一、节流函数
let timer, flag;
/**
* 节流原理:在一定时间内,只能触发一次
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
export function throttle(func, wait = 2000, immediate = true) {
if (immediate) {
if (!flag) {
flag = true;
// 如果是立即执行,则在wait毫秒内开始时执行
typeof func === 'function' && func();
timer = setTimeout(() => {
flag = false;
}, wait);
}
} else {
if (!flag) {
flag = true
// 如果是非立即执行,则在wait毫秒内的结束处执行
timer = setTimeout(() => {
flag = false
typeof func === 'function' && func();
}, wait);
}
}
};
flag为false才执行代码,立刻把flag变为false,flag要在setTimeout里面再改为false和执行函数
二、button
1.disabled
代码如下(示例):
<el-button :disabled="c" class="bbtn" @click="fresh">
</el-button>
2.loading
代码如下(示例):
<div v-loading="c1">
/* 全局加载层 */
Vue.prototype.$baseLoading = (index, text) => {
let loading
if (!index) {
loading = Loading.service({
lock: true,
text: text || loadingText,
background: 'hsla(0,0%,100%,.8)'
})
} else {
loading = Loading.service({
lock: true,
text: text || loadingText,
spinner: 'vab-loading-type' + index,
background: 'hsla(0,0%,100%,.8)'
})
}
return loading
}