函数节流(throttle)
限制一个函数在一定时间内只能执行一次。
函数节流的使用场景
当事件不需要频繁的被触发,但是由于特定DOM事件的原因不断的触发事件的时候
在你需要用它的时候,你自然而然会知道是什么时候!
如: input事件,resize事件,scroll事件,mousemove事件,touchmove事件等只要发生操作就会频繁触发的事件
例如:
- scroll滚动加载,
- scroll滚动控制头部显示隐藏
- input输入内容开始搜索
- 防止用户高频率操作提交多次表单
- ·······
/**
* @class Throttle
* @param {Function} callback 需要触发的事件
* @param {Number} interval 触发事件的间隔时间
* @return {Object} 返回Throttle实例
*/
function Throttle(callback, interval) {
// 日常判断,保证当前是一个由Throttle生成的实例
if(this instanceof Throttle) {
this.callback = callback; // 保存需要执行的函数
this.interval = interval || 500; // 设置节流时长,默认500
this.firstTime = true; // 设置标志位,如果是第一次执行将不会节流
this.timer = null; // 设置定时器
}else {
return new Throttle(callback,interval);
}
}
// 节流函数的实现
Throttle.prototype.throttle = function (...args) {
let _this = this; // 保存this
// 如果是第一次执行的话,直接调用函数,并修改标志位
if (this.firstTime) {
this.callback.call(_this, ...args);
this.firstTime = false;
}
// 如果当前存在运行中的定时器的话,直接返回,避免重复触发事件,避免重复触发定时器
if (this.timer) {
return false;
}
// 如果不存在定时器的话,定义定时器
this.timer = setTimeout(() => {
// 先执行off方法,关闭之前的定时器,并将this.timer赋值为null;确保在需要执行时间的时候只有一个setTimeout
_this.off();
// 使用call调用函数,并传入参数
_this.callback.call(_this, ...args);
}, _this.interval);
};
// off方法,关闭定时器
Throttle.prototype.off = function () {
clearTimeout(this.timer);
this.timer = null;
};
使用方法如下:
const changeScroll = e => {
console.log(Dtae.now())
}
let myThrottle = new Throttle(changeScroll, 1000);
window.addEventListener('scroll', e => myThrottle.throttle(e), false);
结言
感谢您的查阅,代码冗余或者有错误的地方望不吝赐教;菜鸟一枚,请多关照!
网友评论