节流函数原理不多说了文章很多,直接上代码
不足处
对于传入的参数都是绑定上后都是不变的,需要动态可能要每次参数更新都重新绑(可能对应节流来说,不需要动态参数 😃 )
设定了短时间内触发一次不会执行触发最后一次执行,设置的代码在最后的if判断里,效果如图
function throttle(fn,wait,data,immedate=true,trailing=true){
var pre = 0;
if(!immedate && pre == 0){
pre = Date.now()
}
var timer= null
// 记录触发函数次数
var num = 0
var numtimer = null
return function(){
// var that = this;
var args = arguments;
var now = Date.now();
// 每次触发函数都重置定时器
if(timer){
clearTimeout(timer)
timer = null
}
// 每次触发函数都重置触发计数定时器
if(numtimer){
clearTimeout(numtimer)
numtimer = null
}
if( now - pre >= wait){
// fn.apply(context,args);
fn(this,data+Math.random());
pre = Date.now();
++num
console.log("执行次数"+num)
}
// 到设定时间后函数触发次数从0开始计数
numtimer = setTimeout(() => {
num = 0
}, wait);
// 如果函数触发数大于2次,同时节流后再执行(trailing)为true则在等待设定到好时间后执行一次函数
if(trailing & num>1){
// sum = 0
timer = setTimeout(() => {
fn(this,'节流后再执行'+data);
pre = 0;
num = 0
}, wait);
}
}
}
function handle(e,str){
console.log(str);
}
window.addEventListener("mousemove",throttle(handle,1000,'Hello '));