JavaScript 性能優化-防抖和節流

由來

在前端開發中有一部分的用戶行爲會頻繁的觸發事件執行,而對於DOM操作.資源加載等耗費性能的處理,
很可能導致頁面的卡頓,甚至是瀏覽器的崩潰.函數節流和函數防抖就是爲了解決類似需求應運而生的。

節流

• 定義

1. 函數節流就是預定一個函數只有在大於等於執行週期時才執行,週期內調用不執行。好像水滴攢到一定重量纔會落下一樣。

• 場景

1. 窗口調整(resize)
2. 頁面滾動(scoll)
3. 搶購瘋狂點擊(mousedown)

• 實現

function throttle(handler, wait){  
            // handler 預定義函數 wait等待毫秒數
            var lastTime = 0;
            return function(e){
                var nowTime = new Date().getTime();
                if(nowTime-lastTime > wait){
                    handler.apply(this,arguments);
                    lastTime = nowTime;
                }else{
                    //lastTime = nowTime;
                }
            }
        }

防抖

• 定義

1. 函數防抖就是在函數需要頻繁觸發情況下,只要有足夠的空閒時間,才執行一次。
   就好像是公交司機會等人都上車後纔出站一樣

• 場景

1. 實時搜索(keyup)
2. 拖拽(mousemove)

• 實現

function debounce(handler, delay){
 		    // handler 預定義函數 wait等待毫秒
            var timer = null;
            return function (){
                var _self = this, args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    handler.apply(_self, args);
                },delay);
            }
        }