函式防抖和函式節流

2022-07-22 19:36:14 字數 1018 閱讀 4526

函式防抖,就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。

簡單的說,當乙個動作連續觸發,則只執行最後一次。

打個比方,坐公交,司機需要等最後乙個人進入才能關門。每次進入乙個人,司機就會多等待幾秒再關門。

限制乙個函式在一定時間內只能執行一次。

舉個例子,乘坐地鐵,過閘機時,每個人進入後3秒後門關閉,等待下乙個人進入。

連續的事件,只需觸發一次**的場景有:

間隔一段時間執行一次**的場景有:

函式防抖的簡單實現:

1 const _.debounce = (func, wait) =>;

8 };

函式防抖在執行目標方法時,會等待一段時間。當又執行相同方法時,若前乙個定時任務未執行完,則clear掉定時任務,重新定時。

1)函式節流的settimeout版簡單實現

1 const _.throttle = (func, wait) =>

89 timer = settimeout(() =>, wait);

13};

14 };

函式節流的目的,是為了限制函式一段時間內只能執行一次。因此,通過使用定時任務,延時方法執行。在延時的時間內,方法若被觸發,則直接退出方法。從而,實現函式一段時間內只執行一次。

2)函式節流的時間戳版簡單實現

根據函式節流的原理,我們也可以不依賴settimeout實現函式節流。

1 const throttle = (func, wait) =>9};

10 };

其實現原理,通過比對上一次執行時間與本次執行時間的時間差與間隔時間的大小關係,來判斷是否執行函式。若時間差大於間隔時間,則立刻執行一次函式。並更新上一次執行時間。

相同點:

不同點:

函式防抖和函式節流

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

函式防抖和函式節流

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

函式節流和函式防抖

概念 在規定的時間段內 例如1000ms 即使事件觸發了很多次,都只執行一次對應的任務。栗子 在我們進入地鐵站時通過閘機,每隔3秒內只允許乙個人通過,即使多個人同時刷卡,也只允許乙個人通過。運用場景 如果我們在改變瀏覽器的大小或者監聽滑鼠移動事件等事件 短時間內觸發多次 為了節省瀏覽器效能開銷,就可...