JS实现/封装节流函数

封装节流函数

节流原理：在一定时间内，只能触发一次

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);},