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

資訊專欄INFORMATION COLUMN

防抖動與節(jié)流

Yangyang / 461人閱讀

摘要：防抖動節(jié)流節(jié)流使得一定時間內(nèi)只觸發(fā)一次函數(shù)。它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而防抖動只是在最后一次事件后才觸發(fā)一次函數(shù)。

防抖動與節(jié)流

針對一些會頻繁觸發(fā)的事件如scroll、resize，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。所以我們對于這種事件我們要進(jìn)行防抖動或者節(jié)流的處理來優(yōu)化性能。

防抖動

防抖動：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內(nèi)再次觸發(fā)的話，就會取消之前的計時器而重新設(shè)置。這樣一來，只有最后一次操作能被觸發(fā)。

節(jié)流

節(jié)流：使得一定時間內(nèi)只觸發(fā)一次函數(shù)。
它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而防抖動只是在最后一次事件后才觸發(fā)一次函數(shù)。
原理是通過判斷是否到達(dá)一定時間來觸發(fā)函數(shù)，若沒到規(guī)定時間則使用計時器延后，而下一次事件則會重新設(shè)定計時器。

時間戳實現(xiàn)：

當(dāng)高頻事件觸發(fā)時，第一次應(yīng)該會立即執(zhí)行（給事件綁定函數(shù)與真正觸發(fā)事件的間隔如果大于delay的話），而后再怎么頻繁觸發(fā)事件，也都是會每delay秒才執(zhí)行一次。而當(dāng)最后一次事件觸發(fā)完畢后，事件也不會再被執(zhí)行了。

var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}
定時器實現(xiàn)：

當(dāng)觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行；直到delay秒后，定時器執(zhí)行執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。

var throttle = fucntion(func,delay){
    var timer = null;

    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}

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

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

相關(guān)文章

  • 小白圖解防抖動與節(jié)流-Javascript篇

    摘要：防抖動與節(jié)流點擊查看源碼防抖動默認(rèn)不立即觸發(fā)保存作用域保存參數(shù)初始化清空所有定時器如果是立即觸發(fā)為空時觸發(fā)操作時間后置空時間后觸發(fā)操作防抖動立即觸發(fā)防抖動節(jié)流默認(rèn)立即觸發(fā)保存作用域保存參數(shù)為空時立即觸發(fā)時間后觸發(fā)操作節(jié)流立即觸發(fā)節(jié)流總結(jié) 防抖動與節(jié)流 點擊查看源碼 防抖動 var debounce = function (fn, delay, isImmediate) { v...

    DevTTL 評論0 收藏0

  • 節(jié)流和防抖動

    摘要：起因面試被問到了節(jié)流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學(xué)起首先先看字面意思節(jié)流的意思就是水龍頭關(guān)小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發(fā)生形變的那一刻舉個例子節(jié)流在改變窗口大小 起因 面試被問到了節(jié)流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學(xué)起 首先, 先看字面意思:節(jié)流(throttl...

    hellowoody 評論0 收藏0

  • 防抖動與節(jié)流

    摘要：它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。 防抖動 其核心內(nèi)涵在于延遲處理，也就是將一系列的事件處理程序全部延遲，保障推送進(jìn)來的第一次事件處理 var debounce　 = function(fn,delay,mustRunDelay){ var timer = null; var t_start; ...

    alexnevsky 評論0 收藏0

  • 防抖動處理和節(jié)流 小技巧

    摘要：簡單的防抖動處理，一秒內(nèi)點擊一次向服務(wù)器請求數(shù)據(jù)點擊按鈕向后臺請求數(shù)據(jù)優(yōu)化點另外一些防抖動的小技巧，請參考封裝好的簡單防抖動函數(shù)防抖動函數(shù)要執(zhí)行的函數(shù)，間隔毫秒數(shù)調(diào)用現(xiàn)成的工具庫防抖動節(jié)流 1. 簡單的防抖動處理，一秒內(nèi)點擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...

    lscho 評論0 收藏0

發(fā)表評論

0條評論

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