戳藍字"Web前端嚴選"關注我們哦！

手寫防抖和節流

1.引言

「防抖和節流的產生」

瀏覽器的resize、scroll、keypress、mousemove操作時會頻繁觸發，如果我們在回調中計算元素位置、做一些跟DOM相關的操作，引起瀏覽器回流和重繪，頻繁觸發回調，很可能會造成瀏覽器掉幀，甚至會使瀏覽器崩潰，影響用戶體驗。針對這種現象，目前有兩種常用的解決方案：防抖和節流。

2.防抖

function?debounce(fn,delay){
?let?timer?=?null;
?return?function(){
??clearTimeout(timer);
??timer?=?setTimeout(function(){
???fn.call(this,...arguments)
??},delay)
?}
}

防抖：多次事件觸發，只執行一次

舉例形容一下，就是得帕金森的手去拿一杯水，雖然手抖動很多次，但是拿水的動作只執行一次

body.onscroll?=?debounce(function(){
?console.log("防抖")
},1000)

3.節流

function?throttle(fn,delay){
?let?start?=?Date.now();
?return?function(){
??let?last?=?Date.now();
??if(last?-?start?>?delay){
???fn.apply(this,arguments);
???start?=?last;
??}
?}
}

節流：事件觸發，固定時間內執行一次

舉例形容一下，就是水管每小時流2立方米水，節流減少到每小時流1立方米水

body.onscroll?=?throttle(function(){
?console.log("節流")
},1000)

?? 感謝大家

如果你覺得這篇內容對你挺有有幫助的話：

點贊支持下吧，讓更多的人也能看到這篇內容(收藏不點贊，我就嚶嚶嚶 -_-)

關注公眾號【Web前端嚴選】，定期為你推送好文。

添加個人微信，進群與小伙伴一起玩耍(已經推出)~

點個在看，大家都看?

總結

以上是生活随笔為你收集整理的防抖 节流_面试必备考点：防抖与节流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。