js實現之--防抖節流【理解+程式碼】
阿新 • • 發佈:2018-12-06
防抖:
理解:在車站上車,人員上滿了車才發走重點是人員上滿觸發一次。
場景:實時搜尋,拖拽。
實現:
//每一次都要清空定時器,重新設定上計時器值,使得計時器每一次都重新開始,直到最後滿足條件並且等待delay時間後,才開始執行handler函式。
function debunce(handler,delay){ //handler是要傳入的進行防抖的函式,delay是等待時間。 var timer = null; returnfunction(){ 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; //更新最後時間 } } }