亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

防抖（debounce）和節(jié)流（throttle）的學(xué)習(xí)總結(jié)

caspar / 1126人閱讀

摘要：節(jié)流原理為事件觸發(fā)時調(diào)用的函數(shù)添加時間閾值，只有在超過時間閾值時觸發(fā)事件，回調(diào)函數(shù)才會被調(diào)用。

防抖（debounce）

用戶與網(wǎng)頁進(jìn)行交互時，經(jīng)常出現(xiàn)根據(jù)頁面的狀態(tài)、數(shù)據(jù)向服務(wù)器請求、發(fā)送數(shù)據(jù)的場景，比如：根據(jù)用戶的輸入數(shù)據(jù)進(jìn)行實(shí)時校驗，下拉請求數(shù)據(jù)等等，如果用戶操作過于頻繁，頁面狀態(tài)、數(shù)據(jù)變化的太快太頻繁，會進(jìn)行多次請求，這其中的很多請求都是沒有意義的，實(shí)時校驗，只需要校驗用戶最后的輸入，下拉請求只需要在用戶下拉的最后一次進(jìn)行請求。這就需要防抖來實(shí)現(xiàn)了。
防抖的原理：為事件觸發(fā)時調(diào)用的函數(shù)添加延遲，如果在延遲內(nèi)頻繁觸發(fā)，上一次的事件觸發(fā)會被取消，延遲將會重新計算，這樣一來用戶的最會一次觸發(fā)，函數(shù)才會真正被調(diào)用。

//fn為回調(diào)函數(shù)，delay是人為設(shè)置的延遲
function debounce(fn, delay){
    var timeout; //定時器編號
    return function(){
        //context是回調(diào)函數(shù)運(yùn)行的環(huán)境， 
        //args是回調(diào)函數(shù)的參數(shù)，一般是addEventListener傳進(jìn)來的event變量
        var context = this, args = arguments;
        clearTimeout(timeout);//當(dāng)用戶頻繁觸發(fā)事件時，定時器被清除
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//調(diào)用方式
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector("input").addEventListener("input", validate);
節(jié)流（throttle）

節(jié)流，顧名思義就是把管道的閥門稍稍關(guān)緊一點(diǎn)，讓水流動的少一點(diǎn)。在javascript中，很多事件是連續(xù)觸發(fā)的，比如：resize，mousemove。我們不希望事件頻繁觸發(fā)，如果采用防抖方案，事件只在延遲時間內(nèi)觸發(fā)最后一次，這顯然是不合理的，我們只需要讓其觸發(fā)的頻率低一些，這就需要節(jié)流來實(shí)現(xiàn)。
節(jié)流原理：為事件觸發(fā)時調(diào)用的函數(shù)添加時間閾值，只有在超過時間閾值時觸發(fā)事件，回調(diào)函數(shù)才會被調(diào)用。

//fn為回調(diào)函數(shù)，threshhold是時間閾值
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context是回調(diào)函數(shù)運(yùn)行的環(huán)境， 
        //args是回調(diào)函數(shù)的參數(shù)，一般是addEventListener傳進(jìn)來的event變量
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //通過連續(xù)兩次觸發(fā)的時間間隔，決定是否調(diào)用回調(diào)函數(shù)
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //當(dāng)連續(xù)觸發(fā)行為結(jié)束時，還要進(jìn)行最后一次函數(shù)回調(diào)
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//調(diào)用函數(shù)
var mousemove = throttle(function(e) {
 //do somthing
});

// 綁定監(jiān)聽
document.querySelector("#panel").addEventListener("mousemove", mousemove);

以下是html頁面

最后，大家可以通過這個動畫來理解，學(xué)習(xí)防抖和節(jié)流。

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

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

相關(guān)文章

  • debounce(防抖)和throttle(節(jié)流)

    摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時，前者合并事件并在最后時間去觸發(fā)事件，而后者則是隔間時間觸發(fā)一次關(guān)鍵知識點(diǎn)定時器閉包資源在線測試源代碼 防抖和節(jié)流 窗口的resize、scroll，輸入框內(nèi)容校驗等操作時，如果這些操作處理函數(shù)較為復(fù)雜或頁面頻繁重渲染等操作時，如果事件觸發(fā)的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗非常糟糕。此時我們可以采用debo...

    2bdenny 評論0 收藏0

  • debounce(防抖)和throttle(節(jié)流)

    摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時，前者合并事件并在最后時間去觸發(fā)事件，而后者則是隔間時間觸發(fā)一次關(guān)鍵知識點(diǎn)定時器閉包資源在線測試源代碼 防抖和節(jié)流 窗口的resize、scroll，輸入框內(nèi)容校驗等操作時，如果這些操作處理函數(shù)較為復(fù)雜或頁面頻繁重渲染等操作時，如果事件觸發(fā)的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗非常糟糕。此時我們可以采用debo...

    ssshooter 評論0 收藏0

  • 防抖與節(jié)流（源碼學(xué)習(xí)）

    摘要：防抖與節(jié)流源碼學(xué)習(xí)最近自己擼了一個輪播圖，在點(diǎn)擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學(xué)習(xí)過程源碼來源防抖函數(shù)防抖使用場景現(xiàn)在我們需要做一個搜索框，當(dāng)用戶輸入文字，執(zhí)行事件的時候，需要發(fā)出異步請求去進(jìn)行結(jié)果查詢。 防抖與節(jié)流（源碼學(xué)習(xí)） 最近自己擼了一個輪播圖，在點(diǎn)擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學(xué)習(xí)過程源碼來源：unders...

    instein 評論0 收藏0

  • 說說JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

    摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時候，控制臺才會打印出一行隨機(jī)數(shù)。 為何要防抖和節(jié)流 有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時搜索功能，我們知道如果事件處理函數(shù)無限制調(diào)用，會大大加重瀏覽器的工作量，有可能導(dǎo)致頁面卡頓影響體驗；后臺...

    yanwei 評論0 收藏0

  • 探究防抖(debounce)和節(jié)流(throttle)

    摘要：如果使用的是防抖，那么得等我們停止?jié)L動之后一段時間才會加載新的內(nèi)容，沒有那種無限滾動的流暢感。這時候，我們就可以使用節(jié)流，將事件有效觸發(fā)的頻率降低的同時給用戶流暢的瀏覽體驗。調(diào)用，瀏覽器會在下次刷新的時候執(zhí)行指定回調(diào)函數(shù)。 本文來自我的博客，歡迎大家去GitHub上star我的博客 本文從防抖和節(jié)流出發(fā)，分析它們的特性，并拓展一種特殊的節(jié)流方式requestAnimationFrame...

    keke 評論0 收藏0

發(fā)表評論

0條評論

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