JavaScript函數節流和函數防抖之間的區別


一、概念解釋

 函數節流和函數防抖,兩者都是優化高頻率執行js代碼的一種手段。
 大家大概都知道舊款電視機的工作原理,就是一行行得掃描出色彩到屏幕上,然后組成一張張圖片。由於肉眼只能分辨出一定頻率的變化,當高頻率的掃描,人類是感覺不出來的。反而形成一種視覺效果,就是一張圖。就像高速旋轉的風扇,你看不到扇葉,只看到了一個圓一樣。
 同理,可以類推到js代碼。在一定時間內,代碼執行的次數不一定要非常多。達到一定頻率就足夠了。因為跑得越多,帶來的效果也是一樣。倒不如,把js代碼的執行次數控制在合理的范圍。既能節省瀏覽器CPU資源,又能讓頁面瀏覽更加順暢,不會因為js的執行而發生卡頓。這就是函數節流和函數防抖要做的事。

函數節流是指一定時間內js方法只跑一次。比如人的眨眼睛,就是一定時間內眨一次。這是函數節流最形象的解釋。
函數防抖是指頻繁觸發的情況下,只有足夠的空閑時間,才執行代碼一次。比如生活中的坐公交,就是一定時間內,如果有人陸續刷卡上車,司機就不會開車。只有別人沒刷卡了,司機才開車。

二、函數節流

 函數節流應用的實際場景,多數在監聽頁面元素滾動事件的時候會用到。因為滾動事件,是一個高頻觸發的事件。以下是監聽頁面元素滾動的示例代碼:

// 函數節流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閑,如果在執行中,則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};

 函數節流的要點是,聲明一個變量當標志位,記錄當前代碼是否在執行。
 如果空閑,則可以正常觸發方法執行。
 如果代碼正在執行,則取消這次方法執行,直接return

 這個方法的作用是監聽ID為throttle元素的滾動事件。
 當canRuntrue,則代表現在的滾動處理事件是空閑的,可以使用。
 通過關卡if(!canRun),等於就拿到了通行證。然后下一步的操作就是立馬將關卡關上canRun=false。這樣,其他請求執行滾動事件的方法,就被擋回去了。
 接着用setTimeout規定最小的時間間隔300,接着再執行setTimeout方法體里面的內容。
 最后,等setTimeout里面的方法都執行完畢,才釋放關卡canRun=true,允許下一個訪問者進來。

 這個函數節流的實現形式,需要注意的是執行的間隔時間是>=300ms。如果具體執行的方法是包含callback的,也可以將canRun=true這一步放到callback中。理解了函數節流的關卡設置重點,其實改起來就簡單多了。

三、函數防抖

 函數防抖的應用場景,最常見的就是用戶注冊時候的手機號碼驗證和郵箱驗證了。只有等用戶輸入完畢后,前端才需要檢查格式是否正確,如果不正確,再彈出提示語。以下還是以頁面元素滾動監聽的例子,來進行解析:

// 函數防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未執行的代碼,重置回初始化狀態

    timer = setTimeout(function(){
        console.log("函數防抖");
    }, 300);
};  

 函數防抖的要點,也是需要一個setTimeout來輔助實現。延遲執行需要跑的代碼。
 如果方法多次觸發,則把上次記錄的延遲執行代碼用clearTimeout清掉,重新開始。
 如果計時完畢,沒有方法進來訪問觸發,則執行代碼。

 這個方法的作用是監聽ID為debounce元素的滾動事件
 進入滾動事件方法體的時候,做的第一件事就是清除上次未執行的setTimeout。而setTimeout的引用id由變量timer記錄。
clearTimeout方法,允許傳入無效的值。所以這里直接執行clearTimeout即可。
 然后,將需要執行的代碼放入setTimeout中,再返回setTimeout引用給timer緩存。
 如果倒計時300ms以后,還沒有新的方法觸發滾動事件,則執行setTimeout中的代碼。

 函數防抖的實現重點,就是巧用setTimeout做緩存池,而且可以輕易地清除待執行的代碼。
 其實,用隊列的方式也可以做到這種效果。這里就不深入了。

四、在線demo

函數節流和函數防抖

 這是我寫的一個測試demo,把鼠標移動到模塊上方,滾動滾輪,即可在控制台查看輸出效果。

demo地址https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html

閱讀原文http://www.jianshu.com/p/b73c2acad696


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com