節流和防抖，共性都是對短時間會大量觸發瀏覽器事件的優化//防抖debounce
/* 在使用者觸發事件的時間間隔小於（規定時間段）時候才觸發函式
簡單來說，就是使用者只要觸發事件時間比設定的時間段短，那函式就不會觸發
個人粗鄙理解（只要我動得夠快，你就不會觸發）
*/
class
="inp"
type
="text"
/>
//應用場景，我要在使用者輸入停止1s後，才列印輸出使用者的輸入內容
// 防抖函式 （第一版，簡易版）
function
debounce
(fn, delay)
// 開規定事件的定時器
timer =
settimeout((
)=>
, delay)}}
//獲取元素
let input = document.
queryselector
('.inp');
//展示
function
showval()
//繫結事件
input.oninput =
debounce
(showval,
1000
);
但是簡易版中，使用this的時候就會有問題function
showval()
//原因在於在閉包返回函式後，this已經指向了window
//解決方法
// 防抖函式 （第二版，修正this版）
function
debounce
(fn, delay)
// 開規定事件的定時器
timer =
settimeout((
)=>
, delay)
}}
在第二版中，我們修正了this,但是對於事件引數並沒有修正function
showval
(e)
這個時候就需要第三版
// 防抖函式 （第三版，修正event引數）
function
debounce
(fn, delay)
// 開規定事件的定時器
timer =
settimeout((
)=>
, delay)
}}
很明顯arguments是乙個引數列表
fn.call
(content,param1,param2...
)fn.
(conent,
[param1,param2...])
//第三部 使用call傳遞也是可以的
fn.(this
,...args)
;//使用es6 的...語法將引數列表解構出來
前端節流和防抖（下）
在 限定時間段內 只觸發一次函式，比如 規定時間間隔為1s 那這個函式在1s內只執行1次 不管使用者觸發多少次事件，我觸發函式後，1s後才能重新觸發class inp type text let input document.queryselector inp 間隔1s時間，輸出使用者在input框...
前端防抖節流
防抖和節流是前端最基本的效能優化，在繫結監聽事件onmousemove，onmousewheel時，如果觸發過於頻繁，在一次觸發尚未執行完時又再次觸發，就會造成瀏覽器丟幀，進而影響使用者體驗，防抖和節流就是為了解決這個問題。防抖 在事件觸發n秒後再執行這個函式，如果在n秒內又觸發則重新計時 func...
前端的防抖和節流
防抖和節流都是優化高頻率執行js的方法 dom 結構 123js 結構 var jh 1 var jhbt document.getelementbyid jh 防抖 只有等空閒時間才去執行，比如搜尋框功能，如果快速一直按鍵，難道每輸入乙個鍵就去後台匹配然後渲染嗎？等使用者輸入完整關鍵字在去後台匹配...