国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS進(jìn)階篇1---函數(shù)節(jié)流（throttle）

zhou_you / 2513人閱讀

摘要：主要實(shí)現(xiàn)思路就是通過(guò)定時(shí)器，通過(guò)設(shè)置延時(shí)時(shí)間，在第一次調(diào)用時(shí)，創(chuàng)建定時(shí)器，寫入需要執(zhí)行的函數(shù)。如果這時(shí)前一個(gè)定時(shí)器暫未執(zhí)行，則將其替換為新的定時(shí)器。

JS中的函數(shù)節(jié)流 一、什么是函數(shù)節(jié)流（throttle）

概念：限制一個(gè)函數(shù)在一定時(shí)間內(nèi)只能執(zhí)行一次。

舉個(gè)栗子，坐火車或地鐵，過(guò)安檢的時(shí)候，在一定時(shí)間（例如10秒）內(nèi)，只允許一個(gè)乘客通過(guò)安檢入口，以配合安檢人員完成安檢工作。上例中，每10秒內(nèi)，僅允許一位乘客通過(guò)，分析可知，“函數(shù)節(jié)流”的要點(diǎn)在于，在 一定時(shí)間 之內(nèi)，限制 一個(gè)動(dòng)作 只 執(zhí)行一次 。
二、為什么需要函數(shù)節(jié)流

　　前端開發(fā)過(guò)程中，有一些事件或者函數(shù)，會(huì)被頻繁地觸發(fā)（短時(shí)間按內(nèi)多次觸發(fā)），最常見的例如，onresize，scroll，mousemove ,mousehover 等，這些事件的觸發(fā)頻率很高，不做限制的話，有可能一秒之內(nèi)執(zhí)行幾十次、幾百次，如果在這些函數(shù)內(nèi)部執(zhí)行了其他函數(shù)，尤其是執(zhí)行了操作 DOM 的函數(shù)（瀏覽器操作 DOM 是很耗費(fèi)性能的），那不僅會(huì)造成計(jì)算機(jī)資源的浪費(fèi)，還會(huì)降低程序運(yùn)行速度，甚至造成瀏覽器卡死、崩潰。這種問(wèn)題顯然是致命的。

除此之外，重復(fù)的 ajax 調(diào)用不僅可能會(huì)造成請(qǐng)求數(shù)據(jù)的混亂，還會(huì)造成網(wǎng)絡(luò)擁塞，占用服務(wù)器帶寬，增加服務(wù)器壓力，顯然這個(gè)問(wèn)題也是需要解決的。
三、函數(shù)節(jié)流如何解決上述問(wèn)題

根據(jù)上面對(duì)問(wèn)題的分析，細(xì)細(xì)思索，問(wèn)題的解決方案就呼之欲出了。

主要實(shí)現(xiàn)思路就是通過(guò) setTimeout 定時(shí)器，通過(guò)設(shè)置延時(shí)時(shí)間，在第一次調(diào)用時(shí)，創(chuàng)建定時(shí)器，寫入需要執(zhí)行的函數(shù)。第二次調(diào)用時(shí)，會(huì)清除前一個(gè)定時(shí)器并設(shè)置新的定時(shí)器。如果這時(shí)前一個(gè)定時(shí)器暫未執(zhí)行，則將其替換為新的定時(shí)器。目的在于在一定的時(shí)間內(nèi)，保證多次函數(shù)的請(qǐng)求只執(zhí)行最后一次調(diào)用。
四、函數(shù)節(jié)流的代碼實(shí)現(xiàn)

根據(jù)以上分析，我們對(duì)“函數(shù)節(jié)流”進(jìn)行代碼實(shí)現(xiàn)，如下：

（1）方法一：時(shí)間戳方案

// 時(shí)間戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

（2）方法二：定時(shí)器方案

// 定時(shí)器方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));
以上兩種方法本人都親自測(cè)試過(guò)，小伙伴們可以放心食用（注意，例子中函數(shù)觸發(fā)方式為“ mousemove ”，鼠標(biāo)在頁(yè)面上移動(dòng)，觀察瀏覽器控制臺(tái)的變化），自己運(yùn)行代碼體驗(yàn)后，自然會(huì)更深刻的理解 “函數(shù)節(jié)流” 。
五、函數(shù)節(jié)流的使用場(chǎng)景

到此為止，相信各位應(yīng)該對(duì)函數(shù)節(jié)流有了一個(gè)比較詳細(xì)的了解，那函數(shù)節(jié)流一般用在什么情況之下呢？

懶加載、滾動(dòng)加載、加載更多或監(jiān)聽滾動(dòng)條位置；

百度搜索框，搜索聯(lián)想功能；

防止高頻點(diǎn)擊提交，防止表單重復(fù)提交；

目前遇到過(guò)的使用場(chǎng)景就是這些了，不過(guò)理解了原理，小伙伴可以把它運(yùn)用在需要用到它的任何場(chǎng)合，提高代碼質(zhì)量。

總結(jié)

使用“函數(shù)節(jié)流”的主要目的，是為了優(yōu)化程序性能，提高用戶體驗(yàn)，不過(guò)最主要的為了節(jié)約計(jì)算機(jī)資源，推薦在合適的場(chǎng)合使用它，才能達(dá)到它應(yīng)有的效果，切忌濫用哦！

此文是本人第一篇技術(shù)博客，前后參考查閱了很多資料，比較用心，希望對(duì)各位讀者有所幫助，有不足之處或者疑問(wèn)之處各位也可以在評(píng)論區(qū)指正或者提出。后續(xù)會(huì)推出更多內(nèi)容，期待和各位小伙伴的更多交流。^o^

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

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

相關(guān)文章

  • JS進(jìn)階篇--JS函數(shù)節(jié)流（throttle）

    摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡(jiǎn)單的，估計(jì)大家都想到了，那就是定時(shí)器。在高級(jí)程序設(shè)計(jì)一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個(gè)函數(shù)節(jié)流函數(shù)，它把定時(shí)器存為函數(shù)的一個(gè)屬性個(gè)人的世界觀不喜歡這種寫法。 什么是函數(shù)節(jié)流？ 介紹前，先說(shuō)下背景。在前端開發(fā)中，有時(shí)會(huì)為頁(yè)面綁定resize事件，或者為一個(gè)頁(yè)面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個(gè)特點(diǎn)，就是用戶不必特地?fù)v亂...

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

  • JS進(jìn)階篇3---函數(shù)“節(jié)流” VS “防抖”

    摘要：目的都是為了降低回調(diào)函數(shù)執(zhí)行頻率，節(jié)省計(jì)算機(jī)資源，優(yōu)化性能，提升用戶體驗(yàn)。函數(shù)防抖事件頻繁觸發(fā)的情況下，只有經(jīng)過(guò)足夠的空閑時(shí)間，才執(zhí)行代碼一次。 函數(shù)節(jié)流和函數(shù)防抖的對(duì)比分析 一、前言 前端開發(fā)中，函數(shù)節(jié)流（throttle） 和 函數(shù)防抖（debounce） 作為常用的性能優(yōu)化方法，兩者都是用于優(yōu)化高頻率執(zhí)行 js 代碼的手段，那具體它們有什么異同點(diǎn)呢？有對(duì)這兩個(gè)概念不太了解的小伙伴...

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

  • 【進(jìn)階 6-3 期】深入淺出節(jié)流函數(shù) throttle

    摘要：引言上一節(jié)我們?cè)敿?xì)聊了聊高階函數(shù)之柯里化，通過(guò)介紹其定義和三種柯里化應(yīng)用，并在最后實(shí)現(xiàn)了一個(gè)通用的函數(shù)。第二種方案來(lái)實(shí)現(xiàn)也存在一個(gè)問(wèn)題，因?yàn)槎〞r(shí)器是延遲執(zhí)行的，所以事件停止觸發(fā)時(shí)必然會(huì)響應(yīng)回調(diào)，所以時(shí)無(wú)法生效。 引言 上一節(jié)我們?cè)敿?xì)聊了聊高階函數(shù)之柯里化，通過(guò)介紹其定義和三種柯里化應(yīng)用，并在最后實(shí)現(xiàn)了一個(gè)通用的 currying 函數(shù)。這一小節(jié)會(huì)繼續(xù)之前的篇幅聊聊函數(shù)節(jié)流 thrott...

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

  • Javascript 面試中經(jīng)常被問(wèn)到的三個(gè)問(wèn)題！

    摘要：相反，在討論時(shí)，面試中通常會(huì)提到三件事。通過(guò)對(duì)事件對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行包裹以自由變量的形式緩存時(shí)間信息，最后用來(lái)控制事件的觸發(fā)頻率。而認(rèn)為最后一個(gè)參賽者說(shuō)了算，只要還能吃的，就重新設(shè)定新的定時(shí)器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 本...

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

  • 【前端詞典】5 種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較[性能升級(jí)版]

    摘要：用于獲得當(dāng)前元素到定位父級(jí)頂部的距離偏移值。后來(lái)在項(xiàng)目中總會(huì)遇到滾動(dòng)吸頂?shù)男Ч枰獙?shí)現(xiàn)，現(xiàn)在我將我知道的種滾動(dòng)吸頂實(shí)現(xiàn)方式做詳細(xì)介紹。有兼容性問(wèn)題，在微信瀏覽器某些版本中的值會(huì)為，于是乎也就有了第三種方案的兼容性寫法。修改版預(yù)覽 這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺(jué)得這個(gè)意見確實(shí)中肯。所以就有了這個(gè)升級(jí)的修改版本。代碼同步更新到 GitHub 了。 修改內(nèi)容如下： 添加...

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

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

0條評(píng)論

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