概念
假定時間間隔為200ms,如果觸發事件後的200ms內再次觸發事件,則重新等待200ms,否則將成功執行指定函式。
應用場景
資料查詢、監控使用者輸入
**實現
function
search()
t =settimeout((
)=>
,2000);
}}var test1 = document.
getelementbyid
('test2');
test1.onclick =
search()
;
概念
連續觸發事件,只在指定時間間隔執行指定函式。
應用場景
頁面自適應、監控頁面滾動、滑鼠移動
**實現
// 方法一:首次立即觸發
function
throttle1
(fn, interval
) open =
false
// !!!!!! 首次立刻執行
if(first)
const now = date.
now(
)const wait = now % interval
settimeout((
)=>
, interval - wait)}}
// 方法二:首次立即觸發,間隔時間更穩定
function
throttle2
(fn, interval
)else
, duration)}}
}// 測試**
let times =
0let onmousemove =
throttle2((
)=>,10
)let i =
setinterval((
)=>
onmousemove()
},1)
js防抖與節流以及應用場景
在前端開發中會遇到一些頻繁的事件觸發,例如input,keyup,keydown,scroll,resize,mousemove等,這非常影響效能,所以我們需要控制它們觸發的頻率,方法就是防抖與節流。debounce function debounce func,wait wait 如果直接使用un...
對防抖和節流的理解及其應用場景
在開發中,我們常常會去監聽滾動事件或者使用者輸入框驗證事件,如果事件處理沒有頻率限制,就會加重瀏覽器的負擔,影響使用者的體驗感,因此,我們可以採取防抖 debounce 和節流 throttle 來處理,減少呼叫事件的頻率,達到較好的使用者體驗。防抖 debounce 在事件被觸發n秒後再執行 如果...
對防抖和節流的理解及其應用場景
在開發中,我們常常會去監聽滾動事件或者使用者輸入框驗證事件,如果事件處理沒有頻率限制,就會加重瀏覽器的負擔,影響使用者的體驗感,因此,我們可以採取防抖 debounce 和節流 throttle 來處理,減少呼叫事件的頻率,達到較好的使用者體驗。防抖 debounce 在事件被觸發n秒後再執行 如果...