vue防抖和節流是什麼 如何講清楚函式節流?

2021-10-12 04:46:10 字數 1691 閱讀 9167

相對於函式防抖來說,函式節流的應用場景和頻次更大一些。

如果想複習函式防抖,請看這裡:

千鋒html5學院:如何講清楚函式防抖?​zhuanlan.zhihu.com

正題:

幼兒園所有的小朋友每天都要做3件事:吃飯、睡覺、打豆豆。只有乙個小朋友例外,他的名字叫豆豆。後來,有一位善良勇敢的小朋友站出來說:你們不能這樣打他了,這麼打下去,會把他打死的那我們以後就只能吃飯睡覺了!!所以從現在開始,我們每隔72小時,只能打1次豆豆於是大家都紛紛表示贊同並流出了感動的淚水
豆豆挨打的頻率被降低了,這就叫節流。列舉乙個實際的應用場景

一般情況下,當網頁向下滑動的距離越來越長的時候

在右下角會出現乙個回到頂部的按鈕。

它的實現非常的簡單

window.onscroll = functiion()
然而你很快就發現了這段程式的邏輯問題

那就是,scroll這種滾動事件的觸發頻率是非常高的

只要在頁面上稍微滾動一下

就會連續觸發十幾甚至二十幾次事件

每一次我們都需要重新計算頁面滾動距離,做判斷,顯示按鈕等操作

顯然我們對該事件的觸發頻率不需要那麼高

200ms一次似乎已經足夠了。

於是,我們開始動手寫**。

函式節流(未優化版本)

var lasttime = 0;

window.onscroll = function()

}

如果你仔細的閱讀了上面的**,依然不能理解節流原理

用節流的方式,可以保證在一段時間內,只有第一次執行是生效的

直到超過了設定的時間段,才有機會執行下一次

大大的降低了原有函式的執行頻率

顧名思義,函式節流。

回過頭來,我們再看**

var lasttime = 0; 

window.onscroll = function()

}

最後,參考函式防抖,再來做一點優化吧

window.onscroll = (function()

}})()

- dom 元素的拖拽(mousemove)

- 射擊遊戲在單位時間只能發射一顆子彈(mousedown/keydown)

- canvas 模擬畫板功能(mousemove)

- 懶載入,在滾動過程中判斷是否需要載入(scroll)

- 頁面滾動到底部載入更多(scroll)

防抖和節流 什麼是防抖和節流

目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...

vue 防抖和節流

函式防抖 debounce 當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。函式節流 throttle 當持續觸發事件時,保證一定時間段內只呼叫一次事件處理函式。js desc 函式防抖 param fn 函式 par...

vue防抖註冊全域性 vue全域性防抖和節流

防抖處理 立即執行 const on vue.prototype.on vue.prototype.on function event,func 500 on.call this,event,newfunc 防抖處理 最後執行 const on vue.prototype.on vue.protot...