快捷導(dǎo)航

淺談JavaScript節(jié)流與防抖

更新時(shí)間：2021年11月17日 14:33:30 作者：浪漫主義碼農(nóng)

這篇文章主要為大家介紹了JavaScript的節(jié)流與防抖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

節(jié)流與防抖

背景：當(dāng)我們頻繁去請(qǐng)求資源、接口等其他的時(shí)候，就會(huì)造成操作Dom頻繁，接口壓力大等等，性能下降。比如我有時(shí)候會(huì)每次搜索會(huì)猛地敲回車(chē)，在網(wǎng)絡(luò)不很好的時(shí)候，點(diǎn)擊下一頁(yè)按鈕的時(shí)候也會(huì)一直點(diǎn)，可能網(wǎng)絡(luò)不好也可能服務(wù)器性能低。

為了避免頻繁觸發(fā)同一事件或請(qǐng)求，這時(shí)候就要用到節(jié)流和防抖了。

what？這是啥？當(dāng)我第一次聽(tīng)到這兩個(gè)名字的時(shí)候，心想是指節(jié)省流量、防止手抖嗎。百思不得其解，趕緊就去學(xué)習(xí)。

概念：

簡(jiǎn)單來(lái)說(shuō)：節(jié)流和防抖就是為了防止事件在短時(shí)間內(nèi)多次觸發(fā)的兩種解決方案。都是用過(guò)減少請(qǐng)求的次數(shù)，來(lái)降低壓力，提高性能。

區(qū)別

節(jié)流：在一定的時(shí)間內(nèi)只會(huì)請(qǐng)求一次。

可以理解為：公交車(chē)，每個(gè)人是一次點(diǎn)擊請(qǐng)求，每十分鐘開(kāi)一趟車(chē)，發(fā)送請(qǐng)求

防抖：觸發(fā)事件后n秒后才能執(zhí)行函數(shù)，如果在n秒內(nèi)觸發(fā)了事件，則會(huì)重新計(jì)算執(zhí)行時(shí)間。

比如在一段時(shí)間內(nèi)，我一直點(diǎn)擊按鈕，以最后一次點(diǎn)擊為準(zhǔn)發(fā)送一次請(qǐng)求。

節(jié)流實(shí)現(xiàn)

解決思路：

使用時(shí)間戳（發(fā)生在一段時(shí)間的開(kāi)始），就是在計(jì)算

當(dāng)前點(diǎn)擊的時(shí)間 - 上一次執(zhí)行函數(shù)的時(shí)間 > 我設(shè)定的時(shí)間戳，就執(zhí)行一次函數(shù)

缺點(diǎn)：第一次直接觸發(fā) 最后一次一段時(shí)間內(nèi)無(wú)法觸發(fā)

給一個(gè)場(chǎng)景，當(dāng)我們搜索數(shù)據(jù)的時(shí)候，發(fā)起請(qǐng)求，沒(méi)有做處理是這樣的，請(qǐng)求肯定太過(guò)于頻繁

在這里插入圖片描述

節(jié)流函數(shù)

代碼：

<body>
    <div>
        <span>節(jié)流處理</span><input id="input" type="text">
        <button id="btn">請(qǐng)求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加點(diǎn)擊事件監(jiān)聽(tīng)
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模擬發(fā)起一次請(qǐng)求
    }
//節(jié)流函數(shù)
    function throttle(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        var last = 0;  //上一次結(jié)束的時(shí)間
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //執(zhí)行函數(shù)
                last = cur //更新上一次時(shí)間
            }
        }
    }
</script>

效果：

在這里插入圖片描述

防抖實(shí)現(xiàn)

解決思路：

定時(shí)器（發(fā)生在定時(shí)結(jié)束）。缺點(diǎn)：第一次不觸發(fā) 最后一次延遲觸發(fā)

就是設(shè)置一個(gè)定時(shí)器，如果一直點(diǎn)擊則清除定時(shí)器，最后一次開(kāi)啟定時(shí)器

防抖函數(shù)

代碼：

<body>
    <div>
        <span>防抖處理</span><input id="input" type="text">
        <button id="btn">請(qǐng)求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加點(diǎn)擊事件監(jiān)聽(tīng)
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模擬發(fā)起一次請(qǐng)求
    }
    function debounce(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        var time = null;  //定時(shí)器
        return function () {
            clearTimeout(time);  //清除定時(shí)器
            let context = this;  //獲取當(dāng)前button上下文 如果不指定，箭頭函數(shù)就會(huì)一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

在這里插入圖片描述

防抖升級(jí)版

第一次觸發(fā)和最后一次延遲觸發(fā)

代碼：

    function throttle(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        let time = null
        let flag=true  //標(biāo)識(shí)是不是第一次觸發(fā)
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //觸發(fā)定時(shí)器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

節(jié)流與防抖

背景：當(dāng)我們頻繁去請(qǐng)求資源、接口等其他的時(shí)候，就會(huì)造成操作Dom頻繁，接口壓力大等等，性能下降。比如我有時(shí)候會(huì)每次搜索會(huì)猛地敲回車(chē)，在網(wǎng)絡(luò)不很好的時(shí)候，點(diǎn)擊下一頁(yè)按鈕的時(shí)候也會(huì)一直點(diǎn)，可能網(wǎng)絡(luò)不好也可能服務(wù)器性能低。

為了避免頻繁觸發(fā)同一事件或請(qǐng)求，這時(shí)候就要用到節(jié)流和防抖了。

what？這是啥？當(dāng)我第一次聽(tīng)到這兩個(gè)名字的時(shí)候，心想是指節(jié)省流量、防止手抖嗎。百思不得其解，趕緊就去學(xué)習(xí)。

概念：

簡(jiǎn)單來(lái)說(shuō)：節(jié)流和防抖就是為了防止事件在短時(shí)間內(nèi)多次觸發(fā)的兩種解決方案。都是用過(guò)減少請(qǐng)求的次數(shù)，來(lái)降低壓力，提高性能。

區(qū)別

節(jié)流：在一定的時(shí)間內(nèi)只會(huì)請(qǐng)求一次。

可以理解為：公交車(chē)，每個(gè)人是一次點(diǎn)擊請(qǐng)求，每十分鐘開(kāi)一趟車(chē)，發(fā)送請(qǐng)求

防抖：觸發(fā)事件后n秒后才能執(zhí)行函數(shù)，如果在n秒內(nèi)觸發(fā)了事件，則會(huì)重新計(jì)算執(zhí)行時(shí)間。

比如在一段時(shí)間內(nèi)，我一直點(diǎn)擊按鈕，以最后一次點(diǎn)擊為準(zhǔn)發(fā)送一次請(qǐng)求。

節(jié)流實(shí)現(xiàn)

解決思路：

使用時(shí)間戳（發(fā)生在一段時(shí)間的開(kāi)始），就是在計(jì)算

當(dāng)前點(diǎn)擊的時(shí)間 - 上一次執(zhí)行函數(shù)的時(shí)間 > 我設(shè)定的時(shí)間戳，就執(zhí)行一次函數(shù)

缺點(diǎn)：第一次直接觸發(fā) 最后一次一段時(shí)間內(nèi)無(wú)法觸發(fā)

給一個(gè)場(chǎng)景，當(dāng)我們搜索數(shù)據(jù)的時(shí)候，發(fā)起請(qǐng)求，沒(méi)有做處理是這樣的，請(qǐng)求肯定太過(guò)于頻繁

在這里插入圖片描述

節(jié)流函數(shù)

代碼：

<body>
    <div>
        <span>節(jié)流處理</span><input id="input" type="text">
        <button id="btn">請(qǐng)求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加點(diǎn)擊事件監(jiān)聽(tīng)
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模擬發(fā)起一次請(qǐng)求
    }
//節(jié)流函數(shù)
    function throttle(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        var last = 0;  //上一次結(jié)束的時(shí)間
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //執(zhí)行函數(shù)
                last = cur //更新上一次時(shí)間
            }
        }
    }
</script>

效果：

在這里插入圖片描述

防抖實(shí)現(xiàn)

解決思路：

定時(shí)器（發(fā)生在定時(shí)結(jié)束）。缺點(diǎn)：第一次不觸發(fā) 最后一次延遲觸發(fā)

就是設(shè)置一個(gè)定時(shí)器，如果一直點(diǎn)擊則清除定時(shí)器，最后一次開(kāi)啟定時(shí)器

防抖函數(shù)

代碼：

<body>
    <div>
        <span>防抖處理</span><input id="input" type="text">
        <button id="btn">請(qǐng)求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加點(diǎn)擊事件監(jiān)聽(tīng)
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模擬發(fā)起一次請(qǐng)求
    }
    function debounce(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        var time = null;  //定時(shí)器
        return function () {
            clearTimeout(time);  //清除定時(shí)器
            let context = this;  //獲取當(dāng)前button上下文 如果不指定，箭頭函數(shù)就會(huì)一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

在這里插入圖片描述

防抖升級(jí)版

第一次觸發(fā)和最后一次延遲觸發(fā)

代碼：

    function throttle(fn, delay) {  // fn為執(zhí)行的函數(shù)，delay為延遲時(shí)間
        let time = null
        let flag=true  //標(biāo)識(shí)是不是第一次觸發(fā)
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //觸發(fā)定時(shí)器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

在這里插入圖片描述