資訊專欄INFORMATION COLUMN
摘要：為了解決這些問(wèn)題，就可以使用定時(shí)器對(duì)函數(shù)進(jìn)行節(jié)流。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。
函數(shù)節(jié)流的目的
從字面上就可以理解，函數(shù)節(jié)流就是用來(lái)節(jié)流函數(shù)從而一定程度上優(yōu)化性能的。例如，DOM 操作比起非DOM 交互需要更多的內(nèi)存和CPU 時(shí)間。連續(xù)嘗試進(jìn)行過(guò)多的DOM 相關(guān)操作可能會(huì)導(dǎo)致瀏覽器掛起，有時(shí)候甚至?xí)罎?。尤其在IE 中使用onresize 事件處理程序的時(shí)候容易發(fā)生，當(dāng)調(diào)整瀏覽器大小的時(shí)候，該事件會(huì)連續(xù)觸發(fā)。在onresize 事件處理程序內(nèi)部如果嘗試進(jìn)行DOM 操作，其高頻率的更改可能會(huì)讓瀏覽器崩潰。又例如，我們常見(jiàn)的一個(gè)搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內(nèi)容搜索一次而已。為了解決這些問(wèn)題，就可以使用定時(shí)器對(duì)函數(shù)進(jìn)行節(jié)流。
函數(shù)節(jié)流的原理某些代碼不可以在沒(méi)有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過(guò)了，這個(gè)操作就沒(méi)有任何意義。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器。目的是只有在執(zhí)行函數(shù)的請(qǐng)求停止了一段時(shí)間之后才執(zhí)行。
函數(shù)節(jié)流的基本模式var processor = {
timeoutId: null,
//實(shí)際進(jìn)行處理的方法
performProcessing: function(){
//實(shí)際執(zhí)行的代碼
},
//初始處理調(diào)用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
}, 100);
}
};
//嘗試開(kāi)始執(zhí)行
processor.process();
好吧，看得確實(shí)有點(diǎn)迷糊。下面通過(guò)一個(gè)例子來(lái)詳細(xì)說(shuō)明，并且在這個(gè)基礎(chǔ)模式之上做一個(gè)優(yōu)化處理。
例子場(chǎng)景：實(shí)現(xiàn)常見(jiàn)的搜索功能
①?zèng)]有使用函數(shù)節(jié)流的情況下，為input綁定keyup事件處理函數(shù)，在控制臺(tái)輸出我輸入的內(nèi)容。
測(cè)試主要代碼：
HTMl：
JS：
結(jié)果如圖：
可以看出，這種情況下，每按下一個(gè)鍵盤鍵，就輸出了一次。短短的一些內(nèi)容，輸出了14次，如果每一次都是一次ajax查詢請(qǐng)求的話就發(fā)了14個(gè)請(qǐng)求了。在性能上的消耗可想而知。
②使用基本的函數(shù)節(jié)流模式的情況。
測(cè)試主要代碼：
HTML：
JS：
可以看出，這種情況下，輸入了好一些內(nèi)容，只輸出了一次，因?yàn)闇y(cè)試的時(shí)候設(shè)置了兩次輸入間隔是500ms，實(shí)際應(yīng)用可根據(jù)情況設(shè)置。顯然，這在性能上大大滴得到了優(yōu)化。不過(guò)，這樣的話，有一個(gè)新問(wèn)題，如下圖：
好吧，或許看不出端倪。其實(shí)問(wèn)題就是，假如我不斷地輸入，輸入了很多內(nèi)容，但是我每?jī)纱沃g的輸入間隔都小于自己設(shè)置的delay值，那么，這個(gè)queryData搜索函數(shù)就一直得不到調(diào)用。實(shí)際上，我們更希望的是，當(dāng)達(dá)到某個(gè)時(shí)間值時(shí)，一定要執(zhí)行一次這個(gè)搜索函數(shù)。所以，就有了函數(shù)節(jié)流的改進(jìn)模式。
③函數(shù)節(jié)流增強(qiáng)版
測(cè)試的主要代碼：
復(fù)制代碼
HTML：
JS：
復(fù)制代碼
測(cè)試結(jié)果如圖：
顯然，連續(xù)的輸入，到一定時(shí)間間隔之后，queryData函數(shù)必然會(huì)被調(diào)用，但是又不是頻繁的調(diào)用。這既達(dá)到了節(jié)流的目的，又不會(huì)影響用戶體驗(yàn)。
④進(jìn)一步的優(yōu)化
進(jìn)一步的話，就是可以在調(diào)用throttle函數(shù)之前，先對(duì)輸入的內(nèi)容進(jìn)行判斷，若其值為空、值不變都不用再調(diào)用。這里就不詳說(shuō)了。
更多學(xué)習(xí)鏈接
詳細(xì)改進(jìn)實(shí)例
節(jié)流與去抖
http://www.cnblogs.com/LuckyW...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81703.html
摘要：前言據(jù)說(shuō)阿里有一道面試題就是談?wù)労瘮?shù)節(jié)流和函數(shù)防抖。糟了，這可觸碰到我的知識(shí)盲區(qū)了，好像聽(tīng)也沒(méi)聽(tīng)過(guò)這個(gè)東西，痛定思痛，趕緊學(xué)習(xí)學(xué)習(xí)。概念和例子函數(shù)防抖在事件被觸發(fā)秒后再執(zhí)行回調(diào)，如果在這秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。 前言 據(jù)說(shuō)阿里有一道面試題就是談?wù)労瘮?shù)節(jié)流和函數(shù)防抖。糟了，這可觸碰到我的知識(shí)盲區(qū)了，好像聽(tīng)也沒(méi)聽(tīng)過(guò)這2個(gè)東西，痛定思痛，趕緊學(xué)習(xí)學(xué)習(xí)。here we go！ showImg...
摘要：作用域安全的構(gòu)造函數(shù)會(huì)首先確認(rèn)對(duì)象是正確類型的實(shí)例，然后再進(jìn)行更改，如下這樣就避免了在全局對(duì)象上意外更改或設(shè)置屬性。在多人協(xié)作的項(xiàng)目中，為了避免他們誤改了全局對(duì)象，也應(yīng)使用作用域安全的構(gòu)造函數(shù)。 博客原文地址：Claiyre的個(gè)人博客如需轉(zhuǎn)載，請(qǐng)?jiān)谖恼麻_(kāi)頭注明原文地址 在JavaScript中，函數(shù)的功能十分強(qiáng)大。它們是第一類對(duì)象，也可以作為另一個(gè)對(duì)象的方法，還可以作為參數(shù)傳入另一個(gè)函...
摘要：為此決定自研一個(gè)富文本編輯器。本文，主要介紹如何實(shí)現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。 對(duì)ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計(jì)模式 ② 巧用工廠模式和創(chuàng)建者模式 我為什么把他們兩個(gè)放在一起講？我覺(jué)得這兩個(gè)設(shè)計(jì)模式有相似之處，有時(shí)候會(huì)一個(gè)設(shè)計(jì)模式不能滿...
閱讀 3710·2021-11-24 10:22
閱讀 3788·2021-11-22 09:34
閱讀 2663·2021-11-15 11:39
閱讀 1587·2021-10-14 09:42
閱讀 3718·2021-10-08 10:04
閱讀 1618·2019-08-30 15:52
閱讀 926·2019-08-30 13:49
閱讀 3080·2019-08-30 11:21
