一個函式實現函式節流和函式防抖
阿新 • • 發佈:2018-12-15
函式節流和函式防抖
今天在研究函式防抖和節流的過程中,發現這個方法已經把節流和防抖合二為一了,我很困惑,難道是我對節流和防抖的概念搞錯了。函式節流:使連續執行的事件或函式,變為固定時間間隔執行。 函式防抖:使連續執行的事件或函式,在停止執行後只觸發一次。
/***
* 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)
}
}
}
/**
函式防抖:_throttle(function(){console.log(110)},300,Infinity)
不重複觸發:300ms後執行一次;
重複觸發後:由於duration值給的是Infinity,所以內部一直在循壞,生成定時器,消除定時器,停止觸發後,300ms後執行一次
用途:搜尋輸入框|表單驗證提示,防止使用者輸入連續發起請求。
**/
/**
函式節流:_throttle(function(){console.log(110)},100,500)
不重複觸發:如果duration小於間隔的值,立即執行一次,否則100ms後執行;
重複觸發後:內部一直在循壞,生成定時器,消除定時器,每隔500ms後執行一次,停止觸發後,100ms後再執行一次。 最後多執行的一次可以加個判斷再改改。
用途:scroll滾動事件等等;
**/