1. 程式人生 > >一個函式實現函式節流和函式防抖

一個函式實現函式節流和函式防抖

函式節流和函式防抖

今天在研究函式防抖和節流的過程中,發現這個方法已經把節流和防抖合二為一了,我很困惑,難道是我對節流和防抖的概念搞錯了。

函式節流:使連續執行的事件或函式,變為固定時間間隔執行。 函式防抖:使連續執行的事件或函式,在停止執行後只觸發一次。

  /***
  * 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滾動事件等等; **/