国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Mr_houzi / 1256人閱讀

摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。

原博客地址，歡迎star

函數(shù)防抖和節(jié)流

函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover，input輸入框的keypress等事件在觸發(fā)時(shí)，會(huì)不斷地調(diào)用綁定在事件上的回調(diào)函數(shù)，極大地浪費(fèi)資源，降低前端性能。為了優(yōu)化體驗(yàn)，需要對(duì)這類事件進(jìn)行調(diào)用次數(shù)的限制。

函數(shù)防抖 
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

根據(jù)函數(shù)防抖思路設(shè)計(jì)出第一版的最簡(jiǎn)單的防抖代碼：

var timer; // 維護(hù)同一個(gè)timer
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

用onmousemove測(cè)試一下防抖函數(shù):

// test
function testDebounce() {
    console.log("test");
}
document.onmousemove = () => {
  debounce(testDebounce, 1000);
}

上面例子中的debounce就是防抖函數(shù)，在document中鼠標(biāo)移動(dòng)的時(shí)候，會(huì)在onmousemove最后觸發(fā)的1s后執(zhí)行回調(diào)函數(shù)testDebounce；如果我們一直在瀏覽器中移動(dòng)鼠標(biāo)（比如10s），會(huì)發(fā)現(xiàn)會(huì)在10 + 1s后才會(huì)執(zhí)行testDebounce函數(shù)（因?yàn)閏learTimeout(timer)），這個(gè)就是函數(shù)防抖。

在上面的代碼中，會(huì)出現(xiàn)一個(gè)問題，var timer只能在setTimeout的父級(jí)作用域中，這樣才是同一個(gè)timer，并且為了方便防抖函數(shù)的調(diào)用和回調(diào)函數(shù)fn的傳參問題，我們應(yīng)該用閉包來解決這些問題。

優(yōu)化后的代碼：

function debounce(fn, delay) {
    var timer; // 維護(hù)一個(gè) timer
    return function () {
        var _this = this; // 取debounce執(zhí)行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向調(diào)用debounce的對(duì)象，相當(dāng)于_this.fn(args);
        }, delay);
    };
}

測(cè)試用例：

// test
function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函數(shù)
document.onmousemove = function (e) {
    testDebounceFn(e, "debounce"); // 給防抖函數(shù)傳參
}

使用閉包后，解決傳參和封裝防抖函數(shù)的問題，這樣就可以在其他地方隨便將需要防抖的函數(shù)傳入debounce了。

函數(shù)節(jié)流 
每隔一段時(shí)間，只執(zhí)行一次函數(shù)。

定時(shí)器實(shí)現(xiàn)節(jié)流函數(shù)：

請(qǐng)仔細(xì)看清和防抖函數(shù)的代碼差異

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后執(zhí)行完fn之后清空timer，此時(shí)timer為假，throttle觸發(fā)可以進(jìn)入計(jì)時(shí)器
        }, delay)
    }
}

測(cè)試用例：

function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
    testThrottleFn(e, "throttle"); // 給節(jié)流函數(shù)傳參
}

上面例子中，如果我們一直在瀏覽器中移動(dòng)鼠標(biāo)（比如10s），則在這10s內(nèi)會(huì)每隔1s執(zhí)行一次testThrottle，這就是函數(shù)節(jié)流。

函數(shù)節(jié)流的目的，是為了限制函數(shù)一段時(shí)間內(nèi)只能執(zhí)行一次。因此，定時(shí)器實(shí)現(xiàn)節(jié)流函數(shù)通過使用定時(shí)任務(wù)，延時(shí)方法執(zhí)行。在延時(shí)的時(shí)間內(nèi)，方法若被觸發(fā)，則直接退出方法。從而，實(shí)現(xiàn)函數(shù)一段時(shí)間內(nèi)只執(zhí)行一次。

根據(jù)函數(shù)節(jié)流的原理，我們也可以不依賴 setTimeout實(shí)現(xiàn)函數(shù)節(jié)流。

時(shí)間戳實(shí)現(xiàn)節(jié)流函數(shù)：

function throttle(fn, delay) {
    var previous = 0;
    // 使用閉包返回一個(gè)函數(shù)并且用到閉包函數(shù)外面的變量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

// test
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
    testThrottleFn(e, "throttle"); // 給節(jié)流函數(shù)傳參
}

其實(shí)現(xiàn)原理，通過比對(duì)上一次執(zhí)行時(shí)間與本次執(zhí)行時(shí)間的時(shí)間差與間隔時(shí)間的大小關(guān)系，來判斷是否執(zhí)行函數(shù)。若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。并更新上一次執(zhí)行時(shí)間。

異同比較

相同點(diǎn)：

都可以通過使用 setTimeout 實(shí)現(xiàn)。

目的都是，降低回調(diào)執(zhí)行頻率。節(jié)省計(jì)算資源。

不同點(diǎn)：

函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用clearTimeout 和 setTimeout實(shí)現(xiàn)。函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時(shí)間只執(zhí)行一次，頻率較高的事件中使用來提高性能。

函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。

常見應(yīng)用場(chǎng)景 函數(shù)防抖的應(yīng)用場(chǎng)景

連續(xù)的事件，只需觸發(fā)一次回調(diào)的場(chǎng)景有：

搜索框搜索輸入。只需用戶最后一次輸入完，再發(fā)送請(qǐng)求

手機(jī)號(hào)、郵箱驗(yàn)證輸入檢測(cè)

窗口大小Resize。只需窗口調(diào)整完成后，計(jì)算窗口大小。防止重復(fù)渲染。

函數(shù)節(jié)流的應(yīng)用場(chǎng)景

間隔一段時(shí)間執(zhí)行一次回調(diào)的場(chǎng)景有：

滾動(dòng)加載，加載更多或滾到底部監(jiān)聽

谷歌搜索框，搜索聯(lián)想功能

高頻點(diǎn)擊提交，表單重復(fù)提交

文檔中出現(xiàn)的源代碼都在這里: 防抖、節(jié)流

參考資料：

淺析函數(shù)防抖與函數(shù)節(jié)流
JavaScript專題系列-防抖和節(jié)流
7分鐘理解JS的節(jié)流、防抖及使用場(chǎng)景
防抖、節(jié)流

可能這些參考資料中有某些錯(cuò)誤，但是表示感謝，博客中有些內(nèi)容用了里面的資料。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109053.html

相關(guān)文章

  • 詳談js防抖和節(jié)流

    摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。 本文由小芭樂發(fā)表 0. 引入 首先舉一個(gè)例子： 模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼： 沒有防抖 ...

    shevy 評(píng)論0 收藏0

  • 函數(shù)防抖和節(jié)流

    摘要：應(yīng)用場(chǎng)景給按鈕加函數(shù)防抖防止表單多次提交。對(duì)于輸入框連續(xù)輸入進(jìn)行驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。參考十分鐘學(xué)會(huì)防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖 函數(shù)防抖和節(jié)流 防抖 對(duì)于觸發(fā)非常頻繁又沒有必要每次都執(zhí)行的事件，希望合并到一次去執(zhí)行； 實(shí)現(xiàn)思路： 事件觸發(fā)后，在規(guī)定的時(shí)間范圍內(nèi)如果事件重復(fù)觸發(fā)，那么忽略之前觸發(fā)的事件，并且重新開始計(jì)時(shí)，直到某一次事件觸發(fā)后大于規(guī)定時(shí)間，我們才執(zhí)...

    daydream 評(píng)論0 收藏0

  • JavaScript防抖和節(jié)流

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

    DevWiki 評(píng)論0 收藏0

  • 函數(shù)的防抖和節(jié)流是個(gè)啥？？？

    摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個(gè)函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個(gè)函數(shù)，將目標(biāo)函數(shù)作為回調(diào)傳進(jìn)去，等待一段時(shí)間過后執(zhí)行目標(biāo)函數(shù)第二點(diǎn)實(shí)現(xiàn)了，再看第一點(diǎn)持續(xù)觸發(fā)不執(zhí)行。 曾經(jīng)面試時(shí)候被問到過這個(gè)，年少的我一臉無知。。。 后來工作中遇到了一個(gè)場(chǎng)景：輸入名稱的同時(shí)去服務(wù)器校驗(yàn)名稱是否重復(fù)，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請(qǐng)求。簡(jiǎn)直忍不了，就在項(xiàng)目的u...

    edagarli 評(píng)論0 收藏0

  • JS簡(jiǎn)單實(shí)現(xiàn)防抖和節(jié)流

    摘要：定時(shí)器實(shí)現(xiàn)當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行直到秒后，定時(shí)器執(zhí)行執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。當(dāng)最后一次停止觸發(fā)后，由于定時(shí)器的延遲，可能還會(huì)執(zhí)行一次函數(shù)。 一、什么是防抖和節(jié)流 Ps: 比如搜索框，用戶在輸入的時(shí)候使用change事件去調(diào)用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務(wù)器資源，即使你的服務(wù)器資源...

    MRZYD 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<