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

資訊專欄INFORMATION COLUMN

小菊花課堂之JS的防抖與節(jié)流

leoperfect / 3208人閱讀

摘要：文章來(lái)源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。

前言

陸游有一首《冬夜讀書(shū)示子聿》——“古人學(xué)問(wèn)無(wú)遺力，少壯工夫老始成。紙上得來(lái)終覺(jué)淺，絕知此事要躬行?！保渲械囊馑枷氡卮蠹叶寄苊靼?，在學(xué)習(xí)或工作中，不斷的印證著這首詩(shī)的內(nèi)涵。所以，又有了此篇小菊花文章。

詳解

在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持續(xù)觸發(fā)的時(shí)間，比如 輸入框校驗(yàn)、resize、scroll、mousemove 等操作時(shí)，如果事件觸發(fā)的頻率無(wú)限制，會(huì)家中瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。
我們可以先看看持續(xù)觸發(fā)過(guò)程中頻繁執(zhí)行函數(shù)是怎樣的情況


在上面代碼中，div 元素綁定了 mousemove 事件，當(dāng)鼠標(biāo)在 div（灰色）區(qū)域中移動(dòng)的時(shí)候會(huì)持續(xù)地去觸發(fā)該事件導(dǎo)致頻繁執(zhí)行函數(shù)。

再看一個(gè)例子




    
    沒(méi)有防抖
    
    


    

        1.沒(méi)有防抖的input：

在上面代碼中，會(huì)監(jiān)聽(tīng)鍵盤輸入事件，只要按下鍵盤，就會(huì)觸發(fā)這次模擬的ajax請(qǐng)求，不僅浪費(fèi)了資源，而且在實(shí)際應(yīng)用中，用戶也是需要輸入完整字符后，才請(qǐng)求。

防抖(debounce)

簡(jiǎn)單來(lái)說(shuō)就是防止抖動(dòng)，指觸發(fā)事件在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間。
我們將上面的代碼加入防抖優(yōu)化一下：




    
    加入防抖
    
    


    

        2.加入防抖后的輸入：

上面代碼加入防抖后，當(dāng)持續(xù)在輸入框里輸入時(shí)，并不會(huì)發(fā)送請(qǐng)求，只有當(dāng)在指定時(shí)間間隔內(nèi)沒(méi)有再輸入時(shí)，才會(huì)發(fā)送請(qǐng)求。如果先停止輸入，但是在指定間隔內(nèi)又輸入，會(huì)重新觸發(fā)計(jì)時(shí)。

節(jié)流(throttle)

規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
我們同樣在上面的需求上進(jìn)行修改，加入節(jié)流函數(shù)。

//模擬ajax請(qǐng)求
function ajax(content) {
    console.log("ajax request " + content)
}

function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this;
        let _args = arguments;

        let now = +new Date();
        if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fun.apply(that, _args);
            }, delay)
        } else {
            last = now;
            fun.apply(that, _args);
        }
    }
}
let throttleAjax = throttle(ajax, 1000)
let inputThrottle = document.getElementById("throttle")
inputThrottle.addEventListener("keyup", function (e) {
    throttleAjax(e.target.value)
})

從上面代碼可以看出，規(guī)定每一秒執(zhí)行一次ajax請(qǐng)求，效果圖也能比較清晰的反應(yīng)出來(lái)。

小結(jié) 區(qū)別

函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次；而函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

在其他同學(xué)的文章中看到這樣的解釋：
防抖 — 如果有人進(jìn)電梯（觸發(fā)事件），那電梯將在10秒鐘后出發(fā)（執(zhí)行事件監(jiān)聽(tīng)器），這時(shí)如果又有人進(jìn)電梯了（在10秒內(nèi)再次觸發(fā)該事件），我們又得等10秒再出發(fā)（重新計(jì)時(shí)）。

節(jié)流 — 我們知道目前的一種說(shuō)法是當(dāng) 1 秒內(nèi)連續(xù)播放 24 張以上的圖片時(shí)，在人眼的視覺(jué)中就會(huì)形成一個(gè)連貫的動(dòng)畫(huà)，所以在電影的播放（以前是，現(xiàn)在不知道）中基本是以每秒 24 張的速度播放的，為什么不 100 張或更多是因?yàn)?24 張就可以滿足人類視覺(jué)需求的時(shí)候，100 張就會(huì)顯得很浪費(fèi)資源。

這大概可以較為清晰的講出這兩者的區(qū)別吧。

原理

防抖是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，都會(huì)清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。這樣一來(lái)，只有最后一次操作能被觸發(fā)。

節(jié)流是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)，若沒(méi)到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。

文章來(lái)源
1.詳談js防抖和節(jié)流
2.輕松理解JS函數(shù)節(jié)流和函數(shù)防抖
3.函數(shù)防抖和節(jié)流

好啦，今天的小菊花課堂之JS的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。
see u ~ again

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

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

相關(guān)文章

  • 小菊花課堂之JS的防抖與節(jié)流

    摘要：文章來(lái)源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書(shū)示子聿》——古人學(xué)問(wèn)無(wú)遺力，少壯工夫老始成。紙上得來(lái)終覺(jué)淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩(shī)的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...

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

  • 你們都會(huì)的防抖與節(jié)流

    摘要：關(guān)于防抖與節(jié)流的應(yīng)用和解釋自行查找資料。修改如果有定時(shí)器就清除如果時(shí)間滿足就讓他不滿足總之除了第一次就只讓其中一個(gè)執(zhí)行一開(kāi)始執(zhí)行一次時(shí)間戳，最后停止在執(zhí)行一次。 這一篇文章我想寫一下防抖與節(jié)流，因?yàn)槲易约翰皇呛芾斫舛艺f(shuō)實(shí)話，以前知道，但是老忘，雖然概念還有一些簡(jiǎn)單的寫法會(huì)，但還是缺乏練習(xí)和深刻的理解。 showImg(https://segmentfault.com/img/remo...

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

  • 前端筆記(二) 對(duì)象的深淺拷貝，函數(shù)的防抖與節(jié)流，函數(shù)柯里化 ，圖片的預(yù)加載與懶加載

    摘要：對(duì)象是無(wú)法通過(guò)這種方式深拷貝。這就是函數(shù)防抖和節(jié)流要做的事情。函數(shù)防抖當(dāng)觸發(fā)頻率過(guò)高時(shí)函數(shù)基本停止執(zhí)行而函數(shù)節(jié)流則是按照一定的頻率執(zhí)行事件。 對(duì)象的深淺拷貝 對(duì)象的深拷貝與淺拷貝的區(qū)別： 淺拷貝：僅僅復(fù)制對(duì)象的引用, 而不是對(duì)象本身。 深拷貝：把復(fù)制的對(duì)象所引用的全部對(duì)象都復(fù)制一遍 淺拷貝的實(shí)現(xiàn)： var obj = { age : 18, person : { ...

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

  • 高級(jí)函數(shù)技巧-函數(shù)防抖與節(jié)流

    摘要：封裝方法也比較簡(jiǎn)單，書(shū)中對(duì)此問(wèn)題也進(jìn)行了處理使用定時(shí)器，讓函數(shù)延遲秒后執(zhí)行，在此秒內(nèi)，然后函數(shù)再次被調(diào)用，則刪除上次的定時(shí)器，取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。 在實(shí)際開(kāi)發(fā)中，函數(shù)一定是最實(shí)用最頻繁的一部分，無(wú)論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向?qū)ο笫降木幊蹋紩?huì)有函數(shù)的身影，所以對(duì)函數(shù)進(jìn)行深入的研究是非常有必要的。 函數(shù)節(jié)流 比較直白的說(shuō)，函數(shù)節(jié)流就是強(qiáng)制規(guī)定一...

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

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

    摘要：函數(shù)節(jié)流保證如果電梯第一個(gè)人進(jìn)來(lái)后，秒后準(zhǔn)時(shí)運(yùn)送一次，這個(gè)時(shí)間從第一個(gè)人上電梯開(kāi)始計(jì)時(shí)，不等待，如果沒(méi)有人，則不運(yùn)行。 前言 有一些瀏覽器事件我們不希望它很頻繁的觸發(fā)，如調(diào)整窗口大小(onresize)、監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)(onscroll)，如果這些監(jiān)聽(tīng)事件需要調(diào)用接口的話一秒內(nèi)可能會(huì)調(diào)用上百次，這樣坑定是有問(wèn)題的。 函數(shù)防抖（debounce） 如果有人進(jìn)電梯（觸發(fā)事件），那電梯將在1...

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

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

0條評(píng)論

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