JavaScript防抖和節流

DevWiki 發布于2019-08-23 17:09 / 2112人閱讀

摘要：概念函數防抖和函數節流，兩者都是優化高頻率執行代碼的一種手段。防抖任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流指定時間間隔內只會執行一次任務一定時間內方法只跑一次。

概念

函數防抖和函數節流，兩者都是優化高頻率執行js代碼的一種手段。

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

節流：指定時間間隔內只會執行一次任務（一定時間內js方法只跑一次）。

防抖



$("#debounce").on("click", debounce());

function debounce() {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // 需要防抖的操作...
            console.log("防抖成功！");
        }, 500);
    }
}

函數防抖的應用場景，最常見的就是頁面滾動條監聽的例子，來進行解析：

let timer;
window.onscroll = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        //滾動條位置
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log("滾動條位置：" + scrollTop);
    }, 200)
}

防抖函數的封裝使用

/**
 * 防抖函數
 * @param fn 事件觸發的操作
 * @param delay 多少毫秒內連續觸發事件，不會執行
 * @returns {Function}
 */
function debounce(fn,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log("滾動條位置：" + scrollTop);
},200)

節流



$("#throttle").on("click", throttle());

function throttle(fn) {
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log("節流成功！");
            flag = true;
        }, 1000);
    };
}

函數節流應用的實際場景，根據文本框中輸入的內容自動請求后臺數據
下面是節流函數的封裝與使用：



$("#input").on("keyup", throttle(function () {
    console.log($(this).val());
    // ajax后臺請求....
}, 1000));

/**
 * 節流函數
 * @param fn 事件觸發的操作
 * @param delay 間隔多少毫秒需要觸發一次事件
 */
function throttle(fn, delay) {
    let flag = true;
    return function () {
        let self = this,
            args = arguments;
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            fn.apply(self, args);
            flag = true;
        }, delay);
    }
}

GPU云服務器云服務器 VUE防抖與節流防抖 VUE防抖函數節流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103903.html

徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
20190726-前端筆記-防抖和節流

摘要：定義定時器清空定時器重置定時器防抖流程觸發觸發定義一個定時器，返回執行內容為清除當前定時器，定義執行內容。防抖為了避免一些監聽事件為在自己預料的情況，頻繁觸發。or 在某些監聽命令會頻繁觸發事件比如resize、mousemove等等未防抖示例 var count = 0, Elem = doc.getElementById(con) ...

Thanatos 2019-08-02 15:37 評論0 收藏0
20190726-前端筆記-防抖和節流

摘要：定義定時器清空定時器重置定時器防抖流程觸發觸發定義一個定時器，返回執行內容為清除當前定時器，定義執行內容。防抖為了避免一些監聽事件為在自己預料的情況，頻繁觸發。or 在某些監聽命令會頻繁觸發事件比如resize、mousemove等等未防抖示例 var count = 0, Elem = doc.getElementById(con) ...

JasinYip 2019-08-26 10:22 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

andong777 2019-08-30 15:56 評論0 收藏0