成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

NicolasHe / 3556人閱讀

摘要：函數(shù)節(jié)流函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。函數(shù)防抖函數(shù)在特定的時(shí)間內(nèi)不被再調(diào)用后執(zhí)行。一句話概括函數(shù)節(jié)流是從用戶開始輸入就開始計(jì)時(shí)，而函數(shù)節(jié)流是從用戶停止輸入開始計(jì)時(shí)。

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

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

函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。下面貼英文原文，建議認(rèn)真閱讀：
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called".
Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds".

函數(shù)節(jié)流：確保函數(shù)特定的時(shí)間內(nèi)至多執(zhí)行一次。
函數(shù)防抖：函數(shù)在特定的時(shí)間內(nèi)不被再調(diào)用后執(zhí)行。

上面的概念可能還是不夠清晰，下面均以“輸入框輸入文字觸發(fā)ajax獲取數(shù)據(jù)”為例，分別以防抖和節(jié)流的思想來優(yōu)化，二者的區(qū)別：

輸入框輸入文字如下：1111111111111111111111（停頓3s繼續(xù)輸入）11111111111111111
函數(shù)防抖：當(dāng)用戶持續(xù)輸入1的過程中，并不會(huì)發(fā)送ajax，當(dāng)用戶停止輸入2s后，發(fā)送ajax請(qǐng)求，之后到第3s后，用戶繼續(xù)輸入1的過程中，依舊不會(huì)發(fā)送ajax，當(dāng)用戶停止輸入2s后，又觸發(fā)ajax請(qǐng)求。
函數(shù)節(jié)流：當(dāng)用戶持續(xù)輸入1的過程中（假設(shè)輸入1的過程超過2s了），從你開始輸入1開始計(jì)時(shí)，到第2s，發(fā)送ajax請(qǐng)求。函數(shù)節(jié)流與你是否停止輸入無關(guān)，是一種周期性執(zhí)行的策略。
一句話概括：函數(shù)節(jié)流是從用戶開始輸入就開始計(jì)時(shí)，而函數(shù)節(jié)流是從用戶停止輸入開始計(jì)時(shí)。

場(chǎng)景分析

函數(shù)節(jié)流（throttle）

頻繁的mousemove/keydown，比如高頻的鼠標(biāo)移動(dòng)，游戲射擊類的

搜索聯(lián)想（keyup）

進(jìn)度條（我們可能不需要高頻的更新進(jìn)度）

拖拽的dragover等

高頻的點(diǎn)擊，抽獎(jiǎng)等

無限滾動(dòng)（用戶向下滾動(dòng)無限滾動(dòng)頁(yè)面，要檢查滾動(dòng)位置距底部多遠(yuǎn)。如果離底部進(jìn)了，發(fā)ajax請(qǐng)求獲取更多數(shù)據(jù)插入頁(yè)中）

函數(shù)防抖（debounce）

scroll/resize事件，瀏覽器改變大小，有人說是throttle

文本連續(xù)輸入，ajax驗(yàn)證/關(guān)鍵字搜索

注：throttle和debounce均是通過減少實(shí)際邏輯處理過程的執(zhí)行來提高事件處理函數(shù)運(yùn)行性能的手段，并沒有實(shí)質(zhì)上減少事件的觸發(fā)次數(shù)。

使用函數(shù)節(jié)流是進(jìn)行前端性能優(yōu)化的方法之一，例如，懶加載的實(shí)現(xiàn)。

實(shí)現(xiàn)函數(shù)防抖和函數(shù)節(jié)流

函數(shù)防抖

function debounce(func,wait){
    var timeout;
    return function(){
        var context=this;//用來保存this的正確指向
        var args=arguments;//用來保存觸發(fā)的事件類型，例如keyboard event
        clearTimeout(timeout);//每次都重新開始計(jì)時(shí)
        timeout=setTimeout(function(){
            func.apply(context,args);
        },wait);
    }
}
a.onkeyup=debounce(getValue,3000);
function getValue(){
    console.log(this.value);//使用debounce調(diào)用它時(shí)，this就變?yōu)閣indow
}

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

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;
 
    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次觸發(fā) func 剩余的時(shí)間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果沒有剩余的時(shí)間了或者你改了系統(tǒng)時(shí)間
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

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

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

相關(guān)文章

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

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

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

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

    摘要：若時(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...

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

  • js 防抖 節(jié)流 JavaScript

    摘要：此時(shí)需要采用防抖和節(jié)流的方式來減少調(diào)用頻率，同時(shí)不影響原來效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來之前就觸發(fā)了事件，延時(shí)重新開始。 js 防抖 節(jié)流 JavaScript 實(shí)際工作中，通過監(jiān)聽某些事件，如scroll事件檢測(cè)滾動(dòng)位置，根據(jù)滾動(dòng)位置顯示返回頂部按鈕；如resize事件，對(duì)某些自適應(yīng)頁(yè)面調(diào)整DOM的渲染；如ke...

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

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

    摘要：節(jié)流原理為事件觸發(fā)時(shí)調(diào)用的函數(shù)添加時(shí)間閾值，只有在超過時(shí)間閾值時(shí)觸發(fā)事件，回調(diào)函數(shù)才會(huì)被調(diào)用。 防抖（debounce） 用戶與網(wǎng)頁(yè)進(jìn)行交互時(shí)，經(jīng)常出現(xiàn)根據(jù)頁(yè)面的狀態(tài)、數(shù)據(jù)向服務(wù)器請(qǐng)求、發(fā)送數(shù)據(jù)的場(chǎng)景，比如：根據(jù)用戶的輸入數(shù)據(jù)進(jìn)行實(shí)時(shí)校驗(yàn)，下拉請(qǐng)求數(shù)據(jù)等等，如果用戶操作過于頻繁，頁(yè)面狀態(tài)、數(shù)據(jù)變化的太快太頻繁，會(huì)進(jìn)行多次請(qǐng)求，這其中的很多請(qǐng)求都是沒有意義的，實(shí)時(shí)校驗(yàn)，只需要校驗(yàn)用戶最后...

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

  • 防抖（debounce）和節(jié)流（throttle）---解決事件頻繁觸發(fā)造成頁(yè)面卡死

    摘要：防抖和節(jié)流連續(xù)觸發(fā)觸發(fā)頻率很高的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。節(jié)流防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時(shí)間。 防抖（debounce）和節(jié)流（throttle） 連續(xù)觸發(fā)（觸發(fā)頻率很高）的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。常見的需要優(yōu)化的事件： 鼠標(biāo)事件: mousemove（拖拽） mouseover(劃過) mouseWheel(滾屏)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<