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

資訊專欄INFORMATION COLUMN

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

piglei / 2791人閱讀

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

一、概述

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

1.1 防抖

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

1.2 一系列事件

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

1.3 節(jié)流：

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

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

根據(jù)上面的概念實(shí)現(xiàn)一個(gè)簡(jiǎ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)，新建個(gè)回調(diào)執(zhí)行定時(shí)器
            }
            timeHandle = setTimeout(later, delay);
        }
    }

功能如：


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

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

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

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

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

參考：

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

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

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

相關(guān)文章

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

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

    shevy 評(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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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