防抖（debounce）和節流（throttle）

防抖（debounce）：任務頻繁觸發情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。

節流（throttle）：指定時間間隔內只會執行一次任務。
 防抖與節流的原理：使用setTimeout來存放將要執行的函數。其中函數節流就是利用標記符來控制本次執行完畢。函數防抖就是利用clearTimeout來清楚執行的函數。目的為了節約計算機資源，從而達到一個更好的運行效果。

一、防抖

 用戶在輸入框內容校驗等操作時，如果事件處理函數的調用頻率無限制，會加重瀏覽器的負擔，導致用戶體驗會很不好，防抖和節流的方式減少調用頻率，同時又不影響實際效果。

下面是一個防抖的小案例：

<button id="debounce">點我防抖</button>
    <script>
        window.onload = function () {
            //獲取按鈕並綁定事件
            var myDebounce = document.getElementById("debounce");
            myDebounce.addEventListener("click",debounce(sayDebounce));
        };
        //防抖功能函數，接受傳參
        function debounce(fn){
            //創建一個標記用來存放定時器的返回值
            let timeout = null;
            return function(){
                //每次當用戶點擊、輸入的時候，把前一個定時器消除
                clearTimeout(timeout);
                //創建一個新的setTimeout，這樣能保證點擊按鈕后的間隔內，
                //如果用戶還點擊的話，就不會執行fn函數
                timeout = setTimeout(() => {
                    fn.call(this,arguments);
                },1000);
            };
        };
        //防抖事件的處理
        function sayDebounce(){
            // ...有些需要防抖的工作，在這里進行
            console.log("防抖成功~");
        }
    </script>

在觸發點擊事件后，如果用戶再次點擊了，我們會清空之前的定時器，重新生成一個定時器。意思就是：這件事兒需要等待，如果你反復催促，就重新計時。
 總結一下就是：第一次觸發事件，一段時間內沒有再次觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，再一次觸發了事件，就會重新開始延時。

二、節流

 節流：指定時間間隔內只會執行一次任務。
節流的應用：
1、懶加載監聽滾動條的位置，使用節流按照一定的頻率進行獲取。
2、點擊提交按鈕，只允許一定時間內點擊一次。

    <button id="throttle">點我防抖</button>
    <script>
        window.onload = function () {
            //獲取按鈕並綁定事件
            var myThrottle = document.getElementById("throttle");
            myThrottle.addEventListener("click",throttle(sayThrottle));
        };
        //節流函數
        function throttle(fn){
            //通過閉包保存一個標記
            let canRun = true;
            return function(){
                //在函數開頭判斷標志是否為true，不為true則中斷函數
                if(!canRun){
                    return;
                }
                //將canRun設置為false，防止執行之前再被執行
                canRun  = false;
                //定時器
                setTimeout(() => {
                    fn.call(this,arguments);
                    //執行完事件(例如調用完接口)之后，重新將這個標志設置為true
                    canRun  = true;
                },1000);
            };
        };
        //需要節流的事件
        function sayThrottle(){
            // ...有些需要防抖的工作，在這里進行
            console.log("節流成功~");
        }
    </script>