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

資訊專欄INFORMATION COLUMN

性能-防抖和節(jié)流

zhjx922 / 2395人閱讀

摘要：一概述為了提高頁面性能，有時需要對高頻率觸發(fā)的事件進(jìn)行防抖或者節(jié)流處理。強(qiáng)調(diào)一系列連續(xù)觸發(fā)的事件。防抖的目的就是把，，構(gòu)成的系列或者，構(gòu)成的系列事件合并成一個，即只執(zhí)行或者或者。節(jié)流一段時間內(nèi)的事件，只處理一次，即只調(diào)用一次事件處理程序。

一、概述

為了提高頁面性能，有時需要對高頻率觸發(fā)的事件（scrllo, resize, mousemove, touchmove）進(jìn)行防抖（Debounce）或者節(jié)流（Throttle）處理。這兩個概念很相似，但是他們是不同的概念：

1.1 防抖

把一系列連續(xù)的事件，只處理一次，即只調(diào)用一次事件處理程序。強(qiáng)調(diào)一系列連續(xù)觸發(fā)的事件。

1.2 一系列事件

防抖中注意一個問題：什么是一系列事件？在指定時間間隔（距離上次觸發(fā)的時間）內(nèi)觸發(fā)的相同類型事件視為一個系列的事件。
如：假如scroll事件分別在0，1，3，7，8時間觸發(fā)了事件A，B，C，D，E。假如規(guī)定時間間隔為2，則A，B，C屬于一個系列（D，C之間間隔為3）；D，E屬于一個系列。防抖的目的就是把A，B，C構(gòu)成的系列（或者D，E構(gòu)成的系列）事件合并成一個，即只執(zhí)行A或者C（D或者E）。

1.3 節(jié)流：

一段時間內(nèi)的事件，只處理一次，即只調(diào)用一次事件處理程序。強(qiáng)調(diào)一段時間內(nèi)。

二、防抖的簡單實(shí)現(xiàn) 2.1 V1

根據(jù)上面的概念實(shí)現(xiàn)一個簡單的代碼V1：

var debounce = function(func, delay){
        var timeHandle = null;
        return function(){
            var context = this, 
                args = arguments, 
                later = function(){
                    func.apply(context, arguments);
                };
            if(timeHandle) {
                clearTimeout(timeHandle); // 覆蓋上次事件回調(diào)：清除上次未執(zhí)行的回調(diào)，新建個回調(diào)執(zhí)行定時器
            }
            timeHandle = setTimeout(later, delay);
        }
    }

功能如：


事件處理程序在一系列事件觸發(fā)后delay時間后執(zhí)行。

三、節(jié)流的簡單實(shí)現(xiàn) 3.1 V1

根據(jù)概念實(shí)現(xiàn)各簡單的V1：

var throttle = function(func, delay){
        var previous = 0;
        return function(){
            var context = this,
                args = arguments,
                curr = Date.now();
            // 如果時間間隔超過delay時間，則執(zhí)行回調(diào)
            if(curr - previous >= delay){
                previous = curr; // 更新previous
                func.apply(context, args);
            }
            console.log(curr)
        }
    }
四、其他庫中的debounce, throttle

具體實(shí)現(xiàn)可疑參考下其他庫，畢竟使用的人多，也更合理。
underscoreJS

參考：

http://www.tuicool.com/articl...
http://web.jobbole.com/86158/
防抖DEMO：http://codepen.io/dcorb/pen/K...

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

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

相關(guān)文章

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

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

    shevy 評論0 收藏0

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

    摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

    Mr_houzi 評論0 收藏0

  • 性能-防抖和節(jié)流

    摘要：一概述為了提高頁面性能，有時需要對高頻率觸發(fā)的事件進(jìn)行防抖或者節(jié)流處理。強(qiáng)調(diào)一系列連續(xù)觸發(fā)的事件。防抖的目的就是把，，構(gòu)成的系列或者，構(gòu)成的系列事件合并成一個，即只執(zhí)行或者或者。節(jié)流一段時間內(nèi)的事件，只處理一次，即只調(diào)用一次事件處理程序。 一、概述 為了提高頁面性能，有時需要對高頻率觸發(fā)的事件（scrllo, resize, mousemove, touchmove）進(jìn)行防抖（Debo...

    piglei 評論0 收藏0

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

    摘要：防抖和節(jié)流嚴(yán)格算起來應(yīng)該屬于性能優(yōu)化的知識，但實(shí)際上遇到的頻率相當(dāng)高，處理不當(dāng)或者放任不管就容易引起瀏覽器卡死。 防抖和節(jié)流嚴(yán)格算起來應(yīng)該屬于性能優(yōu)化的知識，但實(shí)際上遇到的頻率相當(dāng)高，處理不當(dāng)或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點(diǎn)掌握的。（信我，你看完肯定就懂了） 從滾動條監(jiān)聽的例子說起 先說一個常見的功能，很多網(wǎng)站會提供這么一個按鈕：用于返回頂部。showImg(ht...

    opengps 評論0 收藏0

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

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

    edagarli 評論0 收藏0

發(fā)表評論

0條評論

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