成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript防抖和節(jié)流

DevWiki / 2118人閱讀

摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。節(jié)流指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)一定時間內(nèi)方法只跑一次。

概念

函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。

防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。

節(jié)流：指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)（一定時間內(nèi)js方法只跑一次）。

防抖 


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

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


函數(shù)防抖的應(yīng)用場景，最常見的就是頁面滾動條監(jiān)聽的例子，來進行解析：

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


防抖函數(shù)的封裝使用

/**
 * 防抖函數(shù)
 * @param fn 事件觸發(fā)的操作
 * @param delay 多少毫秒內(nèi)連續(xù)觸發(fā)事件，不會執(zhí)行
 * @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)
節(jié)流 


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

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


函數(shù)節(jié)流應(yīng)用的實際場景，根據(jù)文本框中輸入的內(nèi)容自動請求后臺數(shù)據(jù)
下面是節(jié)流函數(shù)的封裝與使用：



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

/**
 * 節(jié)流函數(shù)
 * @param fn 事件觸發(fā)的操作
 * @param delay 間隔多少毫秒需要觸發(fā)一次事件
 */
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);
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103903.html

相關(guān)文章

  • 徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

    摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

    Mr_houzi 評論0 收藏0

  • 20190726-前端筆記-防抖和節(jié)流

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

    Thanatos 評論0 收藏0

  • 20190726-前端筆記-防抖和節(jié)流

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

    JasinYip 評論0 收藏0

  • 剖析前端開發(fā)中的防抖和節(jié)流

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

    andong777 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<