防抖原理:
在事件被觸發規定的時間後才執行一次,如果在規定的時間內又一次觸發了事件則重新計時。
應用場景:1.scroll事件滾動觸發 2.搜尋框輸入查詢 3.瀏覽器視窗縮放,resize事件
防抖實現:
function
debounce
(func,wait,bool)
,wait)
;//立即執行,如果callnow為true則立即執行 //立即執行的時候,賦值給result
if(callnow) result = func.
(that,args)
}else
,wait);}
return result;
//最後返回出去
}//定製取消的方法
decounced.
cancel
=function()
return decounced;
}let count =0;
let container = document.
queryselector
('#container');
let btn = doucument.
quertselector
('#btn');
//取消防抖按鈕
function
fuc(
)//取消防抖方法
let dosome =
debounce
(fuc,
5000);
btn.
onclick
=function()
container.onmousemove = dosome;
節流原理:簡單手寫防抖
function
debounce
(fn,wait)
,wait)}}
function
sayhi()
var container = document.
queryselector
('#container'
)container.onmousemove =
debounce
(sayhi,
300)
當持續觸發事件時,保證一段時間內執行一次事件。
實現函式節流有兩種方式一種是時間戳,一種是定時器
時間戳:第一次會觸發,最後一次呼叫不會觸發
定時器:第一次不會觸發,最後一次呼叫會觸發function
throttke
(fn,wait)
}}
function
throttle
(fn,wait)
,wait)}}
}
函式防抖 函式節流
函式節流 乙個函式執行一次後,只有大於設定的執行週期後才會執行第二次。有個需要頻繁觸發的函式,出於優化效能的角度,在規定時間內,只讓函式觸發的第一次生效,後面不生效。節流函式 function throttle fn,delay 200 函式防抖 乙個需要頻繁觸發的函式,在規定時間內,只讓最後一次生...
函式防抖,函式節流
我又雙叒叕來撿起一切的老知識了 今天主要回顧的是 作為為數不多的面試中高頻問題且實際工作經常用到的 函式防抖,節流 首先科普一下函式防抖,節流的概念 函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。函式節流 限制乙個函式在一定時間內只能...
函式節流 函式防抖
防抖 適用於input輸入框格式驗證 聯絡詞等。待使用者停止輸入一段時間再發生請求,避免頻繁請求。實現細節 debounce返回乙個function,關鍵點在於cleartimeout,如果使用者不停輸入,就會一直執行cleartimeout,導致fn無法執行。只有使用者停止x時間後,才會開始執行f...