js函數的節流和防抖

用戶瀏覽頁面時會不可避免的觸發一些高頻度觸發事件（例如頁面 scroll ，屏幕
resize，監聽用戶輸入等），這些事件會頻繁觸發瀏覽器的重拍（reflow）和重繪（repaint）這會嚴重耗費瀏覽器性能，造成頁面
卡頓。
舉幾個例子：比如說我們在滾動事件中要做一個復雜的計算，或者做一個按鈕的防二次點擊操作的需求，這些需求都會在頻繁的事件
回調中做復雜計算，很有可能導致頁面卡頓，這時候我們可以將多次計算合並為一次計算，只在一個精確點做操作。這些事可以利用
函數的防抖來實現

函數的防抖，就是可以讓這個函數每次觸發的時間間隔小於wait，防抖的情況下就是假設用戶一直觸發我這個函數，這個函數只會調用一次，也就是在最後一次來進行調用，下面是一個簡單的防抖函數代碼實現

//func是你要綁定防抖操作的函數，wait是你想要這個函數多少ms之內不能連續觸發，也就是假如你設置了100ms後觸發，那這個函數在100ms之內如果又執行了就不會觸發，直到超過100ms後這個函數才會執行
    function debounce(func, wait) {
        // 定時器變量
        var timer
        return function() {
            // 每次觸發綁定的函數之前先清除定時器
            clearTimeout(timer)
            // 指定 xx ms 後觸發
            timer = setTimeout(func, wait)
        }
    }
     
    // 實際想綁定在 scroll 事件上的 handler
    function realFunc(){
        console.log("success ")
    }
     
    // 采用防抖動
    window.addEventListener(‘scroll‘,debounce(realFunc,500))
 

假如說有現在這樣一個需求，我們需要在滾動的時候實時的console.log(0)，你懂得，在一次滾動過程中函數的執行頻率特別快
，如果這個函數有更為復雜的方法，比如操作dom或者其他交互，會嚴重影響性能。這個時候我們就需要做一個節流的操作來減
少這個函數的調用頻率

函數節流，就是將多次執行變成每隔一段固定的時間執行一次，會大大提高性能，比如我們可以設置一個高頻率事件每隔100ms執行一次，這樣性能就會得到很大的優化，下面是一個簡單的節流函數的代碼實現

//mustRunTime就是你想要設置的多少ms執行一次
    function throttle(func, wait, mustRunTime) {
        var timer,
            startTime = new Date();
     
        return function() {
            var _this = this,
                args = arguments,
                curTime = new Date();
     
            clearTimeout(timer);
            // 如果達到了規定的觸發時間間隔，就觸發這個func
            if(curTime - startTime >= mustRunTime){
                func.apply(_this,args);
                startTime = curTime;
            // 沒達到觸發間隔，重新設定定時器
            }else{
                timer = setTimeout(func, wait);
            }
        };
    };

    function realFunc(){
        console.log("success");
    }
    // 采用了節流函數
    window.addEventListener(‘scroll‘,throttle(realFunc,500,1000));
 

以上是本人對js函數節流和防抖的一些理解，希望對你能有所幫助~~~

js函數的節流和防抖