JS實現函數的節流和防抖

1.函數的節流

一個函數執行一次後，只有大於設定的執行週期後纔會執行第二次。
應用場景：如用戶不斷滑動滾輪

實現原理：
A：用函數的閉包來鎖住上一執行的時間，在用這一次執行的時間相比，大於設定的間隔時間則執行
閉包內部的this執行會出問題這裏用apply修正this指向
B：也可以直接把lasTime放到全局去，不用閉包但這樣就不好在事件監聽的時候傳遞參數delay只能寫死

這裏我節流用閉包寫，防抖就不用閉包了

<script type="text/javascript">
            function throttle(fn, delay) {
                console.log(this)//window
                // 記錄上一次函數觸發的時間
                var lastTime = 0;
                return function() {
                    // 記錄當前函數觸發的時間
                    var nowTime = Date.now();
                    if(nowTime - lastTime > delay) {
                     /*
                          fn();
                        console.log(this)//document
                    */
                        
                        fn.apply(this)// 修正this指向問題
                        console.log(this)//document
                        
                        // 同步時間
                        lastTime = nowTime;
                    }
                }
            }
            document.onscroll = throttle(function() {
                /*console.log(this)//window*/
                console.log(this)//document
                console.log('scroll事件被觸發了' + Date.now())
            }, 1000)
        </script>

2.函數防抖

頻繁觸發的某一函數，只讓最後一次執行
應用場景：用戶多次點擊提交表單

不用閉包後結構會很簡單

<script type="text/javascript">
            var timer = null;// 記錄上一次的延時器
            function debounce() {
                    console.log(timer)
                    clearTimeout(timer)
                    timer = setTimeout(function() {
                    console.log("aaa")
                    }, 1000)
            }
            document.getElementById('btn').onclick = debounce
        </script>