資訊專欄INFORMATION COLUMN
摘要：運用防抖和節(jié)流可以有效降低代碼的執(zhí)行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數(shù)中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。
啥是節(jié)流？
節(jié)流是保證在一段時間內(nèi)，代碼只執(zhí)行了一次。這個一段時間內(nèi)指的是不管用戶操作了幾次，最終僅執(zhí)行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節(jié)流技術(shù)的話，不管用戶點擊了幾次，最終某個時間段內(nèi)只執(zhí)行了一次代碼。這個時間段是可以自行設(shè)置，比如說每一秒執(zhí)行一次。
啥是防抖？
防抖其實和節(jié)流有些類似，畢竟它們的最終目的都是如出一轍。防抖是在一段時間結(jié)束之后，才觸發(fā)一次事件。如果一段時間內(nèi)未結(jié)束再次觸發(fā)了事件，那么就會重新計算這段時間。同樣的例子，還是用戶狂點按鈕。但是僅在用戶停止點擊按鈕后的一段時間之后才會執(zhí)行一次。如果用戶暫停點擊按鈕的時間不到一段時間內(nèi)又再次點擊按鈕，那么就會重新計算時間。這個時間同樣可以自行設(shè)置。
為啥要防抖或節(jié)流呢？
為了優(yōu)化高頻率事件，比如說onscroll滾動 oninput搜索框聯(lián)想 resize窗口大小變化 onkeydown onkeyup...等等。這些高頻率事件很有可能導(dǎo)致頁面卡頓，影響用戶體驗。運用防抖和節(jié)流可以有效降低代碼的執(zhí)行頻率，從而解決高頻率事件的頁面卡頓問題。或許還有疑問，為啥高頻事件就會導(dǎo)致頁面卡頓呢？
這就要從頁面的展示過程說起了。
頁面的展示過程
展示過程大致為以下順序:
Javascript -> Style -> Layout -> Paint -> Composite
首先，Javascript階段會往頁面中添加一些DOM或動畫，然后到Style階段確定每個DOM應(yīng)該用什么樣式規(guī)則。在Layout階段布局，最終確定DOM顯示的位置和大小。在Paint階段進行DOM的繪制，它是在不同層上進行繪制。注意，樣式變化是重繪，布局和位置變化是重排。重排一定導(dǎo)致重繪，重繪不一定導(dǎo)致重排。最后一個階段Composite進行渲染層合并。(所以做一些動畫效果盡量用CSS3的transform等屬性，因為該屬性是脫離文檔流，不用合并渲染層的。)由此可見，如果觸發(fā)了很多高頻率的事件，就會導(dǎo)致頁面不停的確定位置和大小 ，不停的重排重繪并且合并渲染層。所以導(dǎo)致頁面卡頓也可以解釋了。
接下來會用例子來一步步實現(xiàn)節(jié)流和防抖的原理。
節(jié)流
首先 比如頁面上有個按鈕，用戶可以點擊該按鈕。該按鈕上綁定了一個點擊事件，用戶可以瘋狂點擊觸發(fā)該事件，肯定結(jié)果就是瘋狂觸發(fā)該事件。目標(biāo)是讓該按鈕不管用戶點擊的多快，最終該事件每秒僅執(zhí)行一次。
throttle
按鈕
可以看到，用戶瘋狂點擊了20次，那么該事件也理所當(dāng)然的執(zhí)行了20次，這顯然不是我們想要的。
基礎(chǔ)版:
按鈕
為了盡可能的減少篇幅，把一些無用的代碼都刪除了。
定義一個throttle方法，該方法傳入了兩個參數(shù)，一個是要執(zhí)行的事件，另一個是間隔時間。該throttle方法是一個閉包的寫法，并且返回了一個函數(shù)。首先定義了上次的時間戳pre，pre默認第一次為0。然后獲取到當(dāng)前時間，用當(dāng)前時間減去上次的時間戳也就是pre，如果這個差值大于了傳遞的時間間隔wait，也就表明可以執(zhí)行下一次的函數(shù)了。所以執(zhí)行方法并且傳遞this和參數(shù)。并把當(dāng)前時間賦給pre，以便做下一次節(jié)流的判斷。 看下效果:
可以看到，雖然瘋狂點擊按鈕，但是事件卻沒有瘋狂觸發(fā)，保持了每一秒執(zhí)行一次的速度。也就達成了我們的目標(biāo)。
但是還有一個問題就是，我最后點擊按鈕的那次也應(yīng)該延遲觸發(fā)最后一次的事件，但是結(jié)果并沒有。需要補上最后一次沒有觸發(fā)事件的問題，接下來優(yōu)化它。
進階版：
按鈕
很明顯看到，進階版多傳了一個參數(shù)對象，trailing:true。該參數(shù)用來表示是否執(zhí)行最后一次觸發(fā)的方法。
在函數(shù)中，首先定義了一個空的定時器變量timeout，用來計算時間間隔。其次多了一個else if的條件判斷，判斷如果時間間隔小于wait，就表示該方法要保留起來延遲去執(zhí)行。所以生成了一個定時器，延遲執(zhí)行l(wèi)ater函數(shù)，later函數(shù)就是執(zhí)行該func函數(shù)。此處注意一點，這個延遲時間的問題。延遲時間不能是wait，必須是wait減去當(dāng)前時間和上次時間的時間獎額。剩下的才是剩余時間延遲。還有一點要注意，在if中一定要清楚定時器，不然會影響else if的條件判斷。經(jīng)過測試，確實能在點擊的最后一次后，延遲不到一秒觸發(fā)了該事件。
剩下最后一個優(yōu)化點，其實第一次點擊按鈕，也應(yīng)該延遲觸發(fā)事件。目前的版本是點擊按鈕的第一次就直接觸發(fā)該事件。優(yōu)化它：
最終版：
按鈕
可以看到，傳遞一個新的參數(shù)對象leading為false。用來表示第一次也延遲執(zhí)行。那么問題來了，怎樣才能第一次延遲執(zhí)行呢？實現(xiàn)其實很簡單，進階版已經(jīng)實現(xiàn)了else if延遲執(zhí)行，現(xiàn)只需讓第一次不走if，走else if就可實現(xiàn)第一次的延遲執(zhí)行。總共改動僅兩處，第一處：判斷用戶是否傳遞了參數(shù)leading為false。如果傳遞了leading為false，則把當(dāng)前時間now賦給上次時間pre。為何這樣做呢? 目的就是為了第一步的時候也走else if。這么看。pre=now 那么if判斷條件就相當(dāng)與now-now。now-now=0，當(dāng)然不滿足if條件，即第一次走了else if。這還不算完，在else if中要校正pre時間。如果option.leading為false，那么pre就初始為0。pre為0的就會走if。只有走了if才會清空定時器，不然的話只會執(zhí)行一次便不會繼續(xù)往下執(zhí)行。因為if和else if的判斷條件都不滿足。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117494.html
摘要：運用防抖和節(jié)流可以有效降低代碼的執(zhí)行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數(shù)中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。 啥是節(jié)流？ 節(jié)流是保證在一段時間內(nèi)，代碼只執(zhí)行了一次。這個一段時間內(nèi)指的是不管用戶操作了幾次，最終僅執(zhí)行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節(jié)流...
摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個函數(shù)，將目標(biāo)函數(shù)作為回調(diào)傳進去，等待一段時間過后執(zhí)行目標(biāo)函數(shù)第二點實現(xiàn)了，再看第一點持續(xù)觸發(fā)不執(zhí)行。 曾經(jīng)面試時候被問到過這個，年少的我一臉無知。。。 后來工作中遇到了一個場景：輸入名稱的同時去服務(wù)器校驗名稱是否重復(fù)，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請求。簡直忍不了，就在項目的u...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
閱讀 1217·2021-11-23 09:51
閱讀 1995·2021-10-08 10:05
閱讀 2354·2019-08-30 15:56
閱讀 1912·2019-08-30 15:55
閱讀 2647·2019-08-30 15:55
閱讀 2501·2019-08-30 13:53
閱讀 3513·2019-08-30 12:52
閱讀 1262·2019-08-29 10:57
