防抖定庵、節(jié)流

在進(jìn)行窗口的resize、scroll踪危,輸入框內(nèi)容校驗(yàn)等操作時(shí)蔬浙,如果事件處理函數(shù)調(diào)用的頻率無限制,會(huì)加重瀏覽器的負(fù)擔(dān)贞远,導(dǎo)致用戶體驗(yàn)非常糟糕畴博。此時(shí)我們可以采用debounce(防抖)和throttle(節(jié)流)的方式來減少調(diào)用頻率,同時(shí)又不影響實(shí)際效果蓝仲。

函數(shù)防抖

函數(shù)防抖(debounce):當(dāng)持續(xù)觸發(fā)事件時(shí)俱病,一定時(shí)間段內(nèi)沒有再觸發(fā)事件,事件處理函數(shù)才會(huì)執(zhí)行一次袱结,如果設(shè)定的時(shí)間到來之前庶艾,又一次觸發(fā)了事件,就重新開始延時(shí)擎勘。如下圖咱揍,持續(xù)觸發(fā)scroll事件時(shí),并不執(zhí)行handle函數(shù)棚饵,當(dāng)1000毫秒內(nèi)沒有觸發(fā)scroll事件時(shí)煤裙,才會(huì)延時(shí)觸發(fā)scroll事件。


防抖執(zhí)行時(shí)間線
防抖debounce代碼:
// 防抖
function debounce(func, wait = 0) {
    if (typeof func !== 'function') {
        throw new TypeError('該函數(shù)需要一個(gè)參數(shù)');
    }
    let timeid = null;
    let result;
    return function() {
        let context = this;
        let args = arguments;
        if (timeid) {
            clearTimeout(timeid);
        }
        timeid = setTimeout(function() {
            result = func.apply(context, args);
        }, wait);
        return result;
    };
}
// 處理函數(shù)
function handle() {
    console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', debounce(handle, 1000));

當(dāng)持續(xù)觸發(fā)scroll事件時(shí)噪漾,事件處理函數(shù)handle只在停止?jié)L動(dòng)1000毫秒之后才會(huì)調(diào)用一次硼砰,也就是說在持續(xù)觸發(fā)scroll事件的過程中,事件處理函數(shù)handle一直沒有執(zhí)行欣硼。

函數(shù)節(jié)流

函數(shù)節(jié)流(throttle):當(dāng)持續(xù)觸發(fā)事件時(shí)题翰,保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。節(jié)流通俗解釋就比如我們水龍頭放水,閥門一打開豹障,水嘩嘩的往下流冯事,秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德,我們要把水龍頭關(guān)小點(diǎn)血公,最好是如我們心意按照一定規(guī)律在某個(gè)時(shí)間間隔內(nèi)一滴一滴的往下滴昵仅。如下圖,持續(xù)觸發(fā)scroll事件時(shí)累魔,并不立即執(zhí)行handle函數(shù)摔笤,每隔1000毫秒才會(huì)執(zhí)行一次handle函數(shù)。


節(jié)流執(zhí)行時(shí)間線

函數(shù)節(jié)流主要有兩種實(shí)現(xiàn)方法:時(shí)間戳和定時(shí)器垦写。

//節(jié)流(時(shí)間戳)
var throttle = function(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    };
};
// 處理函數(shù)
function handle() {
    console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', throttle(handle, 1000));

當(dāng)高頻事件觸發(fā)時(shí)吕世,第一次會(huì)立即執(zhí)行(觸發(fā)給scroll事件綁定函數(shù)與真正事件的間隔一般大于delay,如果你非要在網(wǎng)頁加載1000毫秒以內(nèi)就去滾動(dòng)網(wǎng)頁的話梯投,我也沒辦法)命辖,而后再怎么頻繁地觸發(fā)事件,也都是每delay時(shí)間才執(zhí)行一次晚伙。而當(dāng)最后一次事件觸發(fā)完畢后,事件也不會(huì)再被執(zhí)行了 (最后一次觸發(fā)事件與倒數(shù)第二次觸發(fā)事件的間隔小于delay)俭茧。

// 節(jié)流(定時(shí)器)
var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    };
};
// 處理函數(shù)
function handle() {
    console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', throttle(handle, 1000));

當(dāng)觸發(fā)事件的時(shí)候咆疗,我們設(shè)置一個(gè)定時(shí)器,再次觸發(fā)事件的時(shí)候母债,如果定時(shí)器存在午磁,就不執(zhí)行,直到delay時(shí)間后毡们,定時(shí)器執(zhí)行執(zhí)行函數(shù)迅皇,并且清空定時(shí)器,這樣就可以設(shè)置下個(gè)定時(shí)器衙熔。當(dāng)?shù)谝淮斡|發(fā)事件時(shí)登颓,不會(huì)立即執(zhí)行函數(shù),而是在delay秒后才執(zhí)行红氯。而后再怎么頻繁觸發(fā)事件框咙,也都是每delay時(shí)間才執(zhí)行一次。當(dāng)最后一次停止觸發(fā)后痢甘,由于定時(shí)器的delay延遲喇嘱,可能還會(huì)執(zhí)行一次函數(shù)。

節(jié)流中用時(shí)間戳或定時(shí)器都是可以的塞栅。更精確地者铜,可以用時(shí)間戳+定時(shí)器,當(dāng)?shù)谝淮斡|發(fā)事件時(shí)馬上執(zhí)行事件處理函數(shù),最后一次觸發(fā)事件后也還會(huì)執(zhí)行一次事件處理函數(shù)作烟。

// 節(jié)流(時(shí)間戳+定時(shí)器):
var throttle = function(func, delay) {
    var timer = null;
    var startTime = Date.now();
    return function() {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if (remaining <= 0) {
            func.apply(context, args);
            startTime = Date.now();
        } else {
            timer = setTimeout(func, remaining);
        }
    };
};
// 處理函數(shù)
function handle() {
    console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', throttle(handle, 1000));

在節(jié)流函數(shù)內(nèi)部使用開始時(shí)間startTime愉粤、當(dāng)前時(shí)間curTime與delay來計(jì)算剩余時(shí)間remaining,當(dāng)remaining<=0時(shí)表示該執(zhí)行事件處理函數(shù)了(保證了第一次觸發(fā)事件就能立即執(zhí)行事件處理函數(shù)和每隔delay時(shí)間執(zhí)行一次事件處理函數(shù))俗壹。如果還沒到時(shí)間的話就設(shè)定在remaining時(shí)間后再觸發(fā) (保證了最后一次觸發(fā)事件后還能再執(zhí)行一次事件處理函數(shù))科汗。當(dāng)然在remaining這段時(shí)間中如果又一次觸發(fā)事件,那么會(huì)取消當(dāng)前的計(jì)時(shí)器绷雏,并重新計(jì)算一個(gè)remaining來判斷當(dāng)前狀態(tài)头滔。

總結(jié)

函數(shù)防抖:將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器涎显,規(guī)定在delay時(shí)間后觸發(fā)函數(shù)坤检,但是在delay時(shí)間內(nèi)再次觸發(fā)的話,就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置期吓。這樣一來早歇,只有最后一次操作能被觸發(fā)。

函數(shù)節(jié)流:使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)讨勤。原理是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)箭跳。

區(qū)別: 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁,都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)潭千,而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)谱姓。 比如在頁面的無限加載場景下,我們需要用戶在滾動(dòng)頁面時(shí)刨晴,每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求屉来,而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場景狈癞,就適合用節(jié)流技術(shù)來實(shí)現(xiàn)茄靠。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蝶桶,隨后出現(xiàn)的幾起案子慨绳,更是在濱河造成了極大的恐慌,老刑警劉巖真竖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件儡蔓,死亡現(xiàn)場離奇詭異,居然都是意外死亡疼邀,警方通過查閱死者的電腦和手機(jī)喂江,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旁振,“玉大人获询,你說我怎么就攤上這事涨岁。” “怎么了吉嚣?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵梢薪,是天一觀的道長。 經(jīng)常有香客問我尝哆,道長秉撇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任秋泄,我火速辦了婚禮琐馆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘恒序。我一直安慰自己瘦麸,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布歧胁。 她就那樣靜靜地躺著滋饲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喊巍。 梳的紋絲不亂的頭發(fā)上屠缭,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音崭参,去河邊找鬼呵曹。 笑死,一個(gè)胖子當(dāng)著我的面吹牛阵翎,可吹牛的內(nèi)容都是我干的逢并。 我是一名探鬼主播之剧,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼郭卫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了背稼?” 一聲冷哼從身側(cè)響起贰军,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蟹肘,沒想到半個(gè)月后词疼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡帘腹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年贰盗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳欲。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡舵盈,死狀恐怖陋率,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秽晚,我是刑警寧澤瓦糟,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站赴蝇,受9級(jí)特大地震影響菩浙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜句伶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一劲蜻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧熄阻,春花似錦斋竞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至钾军,卻和暖如春鳄袍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吏恭。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工拗小, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人樱哼。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓哀九,卻偏偏與公主長得像,于是被迫代替她去往敵國和親搅幅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子阅束,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在進(jìn)行窗口的resize、scroll茄唐,輸入框內(nèi)容校驗(yàn)等操作時(shí)息裸,如果事件處理函數(shù)調(diào)用的頻率無限制,會(huì)加重瀏覽器的負(fù)...
    iqing2012閱讀 799評(píng)論 0 1
  • 在上周的開發(fā)中沪编,又遇到點(diǎn)擊保存多次請(qǐng)求數(shù)據(jù)重復(fù)的問題呼盆,所以下來學(xué)習(xí)了一下js的防抖和節(jié)流。通過學(xué)習(xí)了解到蚁廓,在進(jìn)行窗...
    any_5637閱讀 395評(píng)論 0 2
  • 在進(jìn)行窗口的resize访圃、scroll,輸入框內(nèi)容校驗(yàn)等操作時(shí)相嵌,如果事件處理函數(shù)調(diào)用的頻率無限制腿时,會(huì)加重瀏覽器的負(fù)...
    為光pig閱讀 336評(píng)論 0 3
  • Ps: 比如搜索框克胳,用戶在輸入的時(shí)候使用change事件去調(diào)用搜索,如果用戶每一次輸入都去搜索的話圈匆,那得消耗多大的...
    燕自浩閱讀 5,965評(píng)論 0 1
  • 一漠另、什么是防抖和節(jié)流 Ps: 比如搜索框,用戶在輸入的時(shí)候使用change事件去調(diào)用搜索跃赚,如果用戶每一次輸入都去搜...
    拾柒_aab0閱讀 276評(píng)論 0 1