JS实现函数节流方法
函数节流可以一定程度得减少系统的损耗,方法如下:
/** * 函数节流方法 * @param {Function} fn 需要进行节流执行的函数 * @param {Number} delay 延时执行的时间 * @param {Number} atleast 至少多长时间触发一次 * @return {Function} 返回节流执行的函数 */ function throttle (fn, delay, atleast = 0) { let timer = null; //定时器 let previous = 0; //记录上一次执行的时间 return (...args) => { let now = +new Date(); //当前时间戳 if (!previous) previous = now; // 赋值开始时间 if (atleast && (now - previous) > atleast) { fn.apply(this, args); //文章下面有给出该行代码的理解 // 重置上一次开始时间为本次结束时间 previous = now; timer && clearTimeout(timer); } else { timer && clearTimeout(timer); // 清除上次定时器 timer = setTimeout(() => { fn.apply(this, args); console.log('else') previous = 0; }, delay); } } }
其中 fn.apply(this, args) 不难理解,我们通过一段代码来看:
function person(name) { this.name = name; this.sayname = function() { alert(this.name) } } function student(name) { person.apply(this, arguments) } var studenta = new student('xiaoming') studenta.sayname();
此时,屏幕会出现 alert('xiaoming')的效果。
由此可见 fn.apply(this, args) 实现了对 fn 的继承, args 需要是数组形式。