技術標籤：JavaScriptjs個人總結

目錄

1.前端節流

2.前端防抖

1.前端節流

常用場景：

滑鼠移入移出，拖拽、滾動條監聽時實現懶載入、防止高頻點選提交、防止表單重複提交；

以上場景經常會被頻繁地觸發（短時間按內多次觸發），不做限制的話，有可能一秒之內執行幾十次、幾百次，如果在這些函式內部執行了其他函式，尤其是執行了操作 DOM 的函式（瀏覽器操作 DOM 是很耗費效能的），那不僅會造成計算機資源的浪費，還會降低程式執行速度，甚至造成瀏覽器卡死、崩潰。這種問題顯然是致命的。

除此之外，重複的 ajax 呼叫不僅可能會造成請求資料的混亂，還會造成網路擁塞，佔用伺服器頻寬，增加伺服器壓力，顯然這個問題也是需要解決的。

節流：

方法一：時間戳

function throttle(fn, delay) {
                let pre = Date.now();
                return function () {
                    const context = this;
                    const args = arguments;
                    const now = Date.now();
                    if (now - pre >= delay) {
                        fn.apply(context, args);
                        pre = Date.now();
                    }
                };
            }

            function handle(){
                //.....
            }

            window.addEventListener('mousemove',throttle(handle,1000));
 

方法二：定時器

 function throttle(fn, delay) {
            let timer = null;
            return function () {
                let context = this;
                let args = arguments;
                if (!timer) {
                    timer = setTimeout(() => {
                        fn.apply(context, args);
                        timer = null;
                    }, delay)
                }
            }
        }

        function handle() {
            console.log(11111)
        }

        window.addEventListener('mousemove', throttle(handle, 1000));
 

2.前端防抖

常用場景：

1.搜尋框輸入查詢，如果使用者一直在輸入中，沒有必要不停地呼叫去請求服務端介面，等使用者停止輸入的時候，再呼叫，設定一個合適的時間間隔，有效減輕服務端壓力。

2.按鈕提交事件。

3.按鈕提交事件。

4.瀏覽器視窗縮放，resize事件(如視窗停止改變大小之後重新計算佈局)等。

當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

function debounce(fn, delay) {
            let timer = null;
            return function () {
                let context = this;
                let args = arguments;
                if(timer){
                    clearTimeout(timer);
                }
                timer =setTimeout(()=>{
                    fn.apply(context,args);
                },delay);
            }
        };

        function handle() {
            console.log(11111);
        };

        window.addEventListener('mousemove', debounce(handle, 1000));