二、防抖
定時器版（推薦）
小結節流和防抖是前端工作中使用頻率很高的技巧，合理使用可以提高前端效能，減輕伺服器壓力。
我們通過輸入框來觀察時間觸發頻率以及觸發時獲取到的值。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
type
="text"
>
>
// 目標輸入框
const ip = document.
getelementsbytagname
('input')[
0]// 使用者輸入後觸發的事件
function
input
(value)
script
>
body
>
html
>
// 節流 —— 時間戳版
function
delaytimestamp
(func, time)
elseif(
!last)
last = now
}}ip.oninput =
delaytimestamp
(input,
1000
)
上面**展示的時間戳實現的節流，立即執行，總是執行滿足時間條件後的第一次觸發，在不滿足時間條件的條件下觸發不會執行。注：會丟失使用者在不滿足時間條件下操作的內容，謹慎選擇使用場景
// 節流 —— 定時器版
function
delaytimeout
(func, time)
, time);}
}}ip.oninput =
delaytimeout
(input,
1000
)
使用者首次觸發後，每隔固定時間會進行一次函式執行，在最後一次觸發後的固定時間也會執行，所以不會丟失資料時間戳是滿足條件後的第一次觸發會執行函式，存在丟失資料的風險；時間戳是以時間內的最後一次觸發為準執行函式，不會丟失資料，最後一次執行有一定等待期（設定的時間間隔）
使用者如果持續操作，則不計時，當使用者在設定的時間內都無操作時，會執行對應的方法。可以理解為如果使用者在計時結束前一直操作，則不會執行對應方法，直到使用者停止操作且計時完成，會執行操作
// 防抖 —— 時間戳版(再到時間後再次觸發才會執行，每次時間間隔的開始後的第一次會觸發，立即執行)
function
noshaketimestamp
(func, time)if(
!last)
last = now
}}ip.oninput =
noshaketimestamp
(input,
1000
)
在一定時間內連續觸發，不會執行函式，在設定的時間間隔後第一次觸發，會執行函式。
// 防抖 —— 定時器版（每次計時結束後才會執行，不立即執行）
function
noshaketimeout
(func, time)
timer =
settimeout((
)=>
, time);}
}// ip.oninput = noshaketimeout(input, 1000)
使用者連續觸發後一定時間未觸發會執行函式。如果你的功能裡有極其頻繁的操作，記得考慮選擇使用節流或者防抖。
函式節流 防抖與使用場景
防抖 思路 根據定時器的建立與銷毀來判斷是否進行fn操作 操作結束後一段時間wait秒內，沒有再次觸發該操作，fn才執行 如果wait秒內又觸發了該操作，則重新計時，重新等待wait秒後執行 若需要先立即執行一次，在定時器生效前定乙個flag 業務場景 搜尋聯想 防止重複 支付等 function ...
函式節流和防抖
click scroll resize change這些事件會被頻繁觸發，如果改變了元素的位置，會引起回流和重繪，影響使用者體驗。對於優化這種現象，有節流和防抖兩種方案。函式防抖，通過 settimeout 和cleartimeout來實現，延遲執行函式。如果函式多次觸發，則把上次記錄的延遲執行 用...
函式防抖和函式節流
1 函式防抖 函式防抖是指頻繁觸發的情況下，只有足夠的時間，才執行 一次，函式防防抖的要點也是要乙個settimeout來輔助實現，延遲執行需要跑的 如果方法多次觸發，則把上次記錄的延遲執行 用cleartimeout清理掉，重新開始。如果計時完畢，沒有方法來訪問觸發。則執行 函式防抖的應用場景，最...