函式節流和函式防抖

2021-09-07 03:03:29 字數 713 閱讀 9449

概念:在規定的時間段內(例如1000ms),即使事件觸發了很多次,都只執行一次對應的任務。

栗子:在我們進入地鐵站時通過閘機,每隔3秒內只允許乙個人通過,即使多個人同時刷卡,也只允許乙個人通過。

運用場景:如果我們在改變瀏覽器的大小或者監聽滑鼠移動事件等事件(短時間內觸發多次),為了節省瀏覽器效能開銷,就可以使函式節流來優化。

**實現:

(function()

don = false

let timer = settimeout(()=>,1000)

})})();

概念:乙個事情連續觸發,只執行最後一次觸發後對應的任務。

栗子:當我們進入地鐵車廂裡的時候,要等所有的人都上車後,再關門。

運用場景:一段連續觸發的事件,只想讓函式觸發一次

**實現:

(function(),1000)

})})()

jieliu

fangdou

(function()

don = false

let timer = settimeout(()=>,1000)

})})();

(function(),1000)

})})()

函式防抖和函式節流

1 函式防抖 函式防抖是指頻繁觸發的情況下,只有足夠的時間,才執行 一次,函式防防抖的要點也是要乙個settimeout來輔助實現,延遲執行需要跑的 如果方法多次觸發,則把上次記錄的延遲執行 用cleartimeout清理掉,重新開始。如果計時完畢,沒有方法來訪問觸發。則執行 函式防抖的應用場景,最...

函式防抖和函式節流

首先分別用一句話區分函式防抖和節流的區別。函式防抖就是在使用者停下相應動作,並在給定時間過去之後僅被呼叫一次。函式節流是使用者在執行相應動作時,每隔一段時間發一次請求。針對一些頻繁觸發的事件如scroll keyup resize,如果正常繫結事件的話,可能在很短的時間內連續觸發事件,十分影響效能。...

函式節流和函式防抖

函式節流的關鍵 宣告乙個變數當標誌位,記錄當前 是否在執行。如果空閒,則可以正常觸發方法執行。如果 正在執行,則取消這次方法執行,直接return。這個方法的作用是監聽id為throttle元素的滾動事件。當canrun為true,則代表現在的滾動處理事件是空閒的,可以使用。通過關卡if canru...