网站怎么维护更新,互联网公司设计,襄阳最新新闻消息,怎么做网站服务封装节流函数 节流原理#xff1a;在一定时间内#xff0c;只能触发一次 let timer, flag;
/*** 节流原理#xff1a;在一定时间内#xff0c;只能触发一次* * param {Function} func 要执行的回调函数 * param {Number} wait 延时的时间* param {Boolean} immediate 是否立…封装节流函数 节流原理在一定时间内只能触发一次 let timer, flag;
/*** 节流原理在一定时间内只能触发一次* * param {Function} func 要执行的回调函数 * param {Number} wait 延时的时间* param {Boolean} immediate 是否立即执行* return null*/
function throttle(func, wait 500, 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 falsetypeof func function func();}, wait);}}
};
export default throttle
使用
// 按钮点击click(e) {// 进行节流控制每this.throttle毫秒内只在开始处执行throttle(() {// 如果按钮时disabled和loading状态不触发水波纹效果if (this.loading true || this.disabled true) return;// 是否开启水波纹效果if (this.ripple) {// 每次点击时移除上一次的类再次添加才能触发动画效果this.waveActive false;this.$nextTick(function() {this.getWaveQuery(e);});}this.$emit(click, e);}, this.throttleTime);},
