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

novo 發(fā)布于2019-08-26 12:02 / 973人閱讀

摘要：函數(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ā)事件），那電梯將在10秒鐘后出發(fā)（執(zhí)行事件監(jiān)聽(tīng)器），這時(shí)如果又有人進(jìn)電梯了（在10秒內(nèi)再次觸發(fā)該事件），我們又得等10秒再出發(fā)（重新計(jì)時(shí)）。

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function log(){
    console.log(1)
}

window.addEventListener("scroll", debounce(log, 1000));

函數(shù)節(jié)流（throttle）

保證如果電梯第一個(gè)人進(jìn)來(lái)后，10秒后準(zhǔn)時(shí)運(yùn)送一次，這個(gè)時(shí)間從第一個(gè)人上電梯開(kāi)始計(jì)時(shí)，不等待，如果沒(méi)有人，則不運(yùn)行。
仔細(xì)想想，上面的防抖方式還是有一定的缺點(diǎn)。如果頁(yè)面很長(zhǎng)，我們一直在滾動(dòng)頁(yè)面，那log方法就一直不會(huì)被執(zhí)行。所以我們可以升級(jí)一下上述的防抖方法。

function throttle(fn,wait,time){
    var previous = null; //記錄上一次運(yùn)行的時(shí)間
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //當(dāng)上一次執(zhí)行的時(shí)間與當(dāng)前的時(shí)間差大于設(shè)置的執(zhí)行間隔時(shí)長(zhǎng)的話，就主動(dòng)執(zhí)行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 執(zhí)行函數(shù)后，馬上記錄當(dāng)前時(shí)間
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function log(){
    console.log(1)
}

window.addEventListener("scroll", throttle(log, 1000, 2000));

GPU云服務(wù)器云服務(wù)器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流函數(shù)中定義函數(shù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108070.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ì)持...

leoperfect 2019-08-23 13:53 評(píng)論0 收藏0
小菊花課堂之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 2019-08-02 12:10 評(píng)論0 收藏0
JavaScript：函數(shù)防抖與函數(shù)節(jié)流

摘要：函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)模擬請(qǐng)求獲取函數(shù)的作用域和變量清除定時(shí)器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。防抖（debounce）名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。使用場(chǎng)景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評(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 2019-08-22 11:21 評(píng)論0 收藏0
前端進(jìn)擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

摘要：隆重請(qǐng)出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過(guò)時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來(lái)實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場(chǎng)景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過(guò)春招系列面試下來(lái)，不少伙伴們還...

_Zhao 2019-08-23 15:37 評(píng)論0 收藏0
防抖與節(jié)流（源碼學(xué)習(xí)）

摘要：防抖與節(jié)流源碼學(xué)習(xí)最近自己擼了一個(gè)輪播圖，在點(diǎn)擊切換的時(shí)候，為了尋求更好的用戶體驗(yàn)，引入了節(jié)流，在此記錄對(duì)源碼的學(xué)習(xí)過(guò)程源碼來(lái)源防抖函數(shù)防抖使用場(chǎng)景現(xiàn)在我們需要做一個(gè)搜索框，當(dāng)用戶輸入文字，執(zhí)行事件的時(shí)候，需要發(fā)出異步請(qǐng)求去進(jìn)行結(jié)果查詢。防抖與節(jié)流（源碼學(xué)習(xí)）最近自己擼了一個(gè)輪播圖，在點(diǎn)擊切換的時(shí)候，為了尋求更好的用戶體驗(yàn)，引入了節(jié)流，在此記錄對(duì)源碼的學(xué)習(xí)過(guò)程源碼來(lái)源：unders...

instein 2019-08-22 17:12 評(píng)論0 收藏0