1. 程式人生 > >js實現之--防抖節流【理解+程式碼】

js實現之--防抖節流【理解+程式碼】

防抖:

    理解:在車站上車,人員上滿了車才發走重點是人員上滿觸發一次。

    場景:實時搜尋,拖拽。

    實現:

        //每一次都要清空定時器,重新設定上計時器值,使得計時器每一次都重新開始,直到最後滿足條件並且等待delay時間後,才開始執行handler函式。

function debunce(handler,delay){ 
//handler是要傳入的進行防抖的函式,delay是等待時間。
  var timer = null;
  return
function(){     var _self = this,args = arguments;     clearTimeout(timer); //每次都要清除這個定時器     timer = setTimeout(function(){ //重新開啟定時器       handler.apply(_self,args);     },delay);   } }

 


節流:

    理解:大於等於10分鐘發一次車,重點是一定間隔時間就會觸發一次。

            (即預定一個函式只有在大於等於執行週期時才會執行,週期內不執行)。

    場景:視窗調整(調整大小),頁面滾動(滾動),搶購時瘋狂點選(滑鼠按下)

    實現:

        //處理程式是要傳入的進行節流的函式,wait是上述的間隔時間。

        //使用時間戳進行時間的計算。

function throttle(handler,wait){ //handler是要進行節流的函式,wait是等待時間
   var lastTime = 0;
    return function
(){         var nowTime = new Date().getTime(); //獲取當前時間         if(nowTime - lastTime> wait){             handler.apply(this,arguments);             lastTime = nowTime; //更新最後時間         }      } }