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函式節流和防抖的一些理解，希望對你能有所幫助~~~