相對於函式防抖來說,函式節流的應用場景和頻次更大一些。
如果想複習函式防抖,請看這裡:
千鋒html5學院:如何講清楚函式防抖?zhuanlan.zhihu.com
正題:
幼兒園所有的小朋友每天都要做3件事:吃飯、睡覺、打豆豆。只有乙個小朋友例外,他的名字叫豆豆。後來,有一位善良勇敢的小朋友站出來說:你們不能這樣打他了,這麼打下去,會把他打死的那我們以後就只能吃飯睡覺了!!所以從現在開始,我們每隔72小時,只能打1次豆豆於是大家都紛紛表示贊同並流出了感動的淚水豆豆挨打的頻率被降低了,這就叫節流。列舉乙個實際的應用場景
![](https://pic.w3help.cc/012/4c63b2fd9fda1675fdd049b4985b6.jpeg)
一般情況下,當網頁向下滑動的距離越來越長的時候
在右下角會出現乙個回到頂部的按鈕。
它的實現非常的簡單
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...