节流运用场景:
比如在 监听鼠标的滚动的时候,如果不加节流,只要滚动就会触发函数,耗费大量的性能,因此,节流就应运而生,以下是节流的代码(运用时间来实现节流)
//形参中的 fn ,是指自己根据需求写的方法
//delay , 是打算多久执行一次方法的时间
export const throttle = (fn,delay) => {
//进入的时间,其实就是用户什么时候 触发 的 滚动条
var enterTime = 0;
var gapTime = delay || 200; //间隔时间
return function(){
var context = this;
//第一次 执行 return 里面的匿名函数方法的时间
var backTime = new Date();
// 用户 触发 到 执行是需要时间的,因此 如果 执行匿名函数方法的时间 减去 出发的时间 大于间隔的时间,就进行函数的触发;
if(backTime - enterTime > gapTime){
fn.apply(context,arguments);
//把执行匿名函数方法的时间保存 到 触发的时间,以便 第二次运行函数
enterTime = backTime
}
}
}
运用:
//引入
import {throttle} from '上面的代码你放在哪个js文件,就引入哪个文件'
//使用
onPageScroll:throttle((e) => {
console.log(e);
},1000)