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);
            }
        }