版权声明:本博文,由(曾梦想仗剑走天涯,现如今脱发眼已瞎)的Anles编写,可随意转载,你喜欢就好。 https://blog.csdn.net/qq_42926373/article/details/83089836
函数节流和函数防抖
今天在研究函数防抖和节流的过程中,发现这个方法已经把节流和防抖合二为一了,我很困惑,难道是我对节流和防抖的概念搞错了。
函数节流:使连续执行的事件或函数,变为固定时间间隔执行。
函数防抖:使连续执行的事件或函数,在重复执行后只触发一次。
函数防抖:_throttle(function(){console.log(110)},300,Infinity)
不重复触发:300ms后执行一次;
重复触发后:由于duration值给的是Infinity,所以内部一直在循坏,生成定时器,消除定时器,停止触发后,300ms后执行一次
用途:搜索输入框|表单验证提示,防止用户输入连续发起请求。
函数节流:_throttle(function(){console.log(110)},100,500)
不重复触发:如果duration小于间隔的值,立即执行一次,否则100ms后执行;
重复触发后:内部一直在循坏,生成定时器,消除定时器,每隔500ms后执行一次,停止触发后,100ms后再执行一次。 最后多执行的一次可以加个判断再改改。
用途:scroll滚动事件等等;
/***
* descrition 函数节流
* @example _throttle(function(){console.log('Anles')},200,3000)
* @param {Function} method 执行的方法
* @param {Number} delay 间隔时间
* @patam {Number} duration 保证多少时间内必须执行一次
***/
function _throttle(method,delay,duration){
var timer = null;
var startDate = new Date()
return function(){
var context = this,args = arguments,EndDate = new Date();
clearTimeout(timer);
if(EndDate - startDate >= duration){
method.apply(context,args);
startDate = EndDate;
}else{
timer = setTimeout(function(){
method.apply(context,args)
},delay)
}
}
}