以下場景往往由于事件頻繁被觸發，因而頻繁執行DOM操作、資源加載等重行為，導致UI停頓甚至瀏覽器崩潰。

1.window對象的resize、scroll事件

2.拖拽時的mousemove事件

3.射擊游戲中的mousedown、keydown事件

4.文字輸入、自動完成的keyup事件

函數防抖(debounce)

在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。

---

模擬一段ajax請求

demo1

function ajax(content) {console.log('ajax request ' + content) }function debounce(fun, delay) {return function (args) {let that = thislet _args = argsclearTimeout(fun.id)fun.id = setTimeout(function () {fun.call(that, _args)}, delay)} }let inputb = document.getElementById('debounce')let debounceAjax = debounce(ajax, 500)inputb.addEventListener('keyup', function (e) {debounceAjax(e.target.value)})

可以看到，我們加入了防抖以后，當你在頻繁的輸入時，并不會發送請求，只有當你在指定間隔內沒有輸入時，才會執行函數。
如果停止輸入但是在指定間隔內又輸入，會重新觸發計時。

demo2

window.onscroll = function(){//lazyload();debounce(lazyload,window); }; function debounce(method,context){clearTimeout(method.timeout);method.timeout = setTimeout(function(){method.call(context);},500); } function lazyload(){console.log("scroll執行了"+scrollnum); }

函數節流(throttle)

規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。

function throttle2(method, delay, time) {var timeout,startTime = new Date();return function() {var context = this,args = arguments,curTime = new Date();clearTimeout(timeout);// 如果達到了規定的觸發時間間隔，觸發 handlerif (curTime - startTime >= time) {method.apply(context, args);startTime = curTime;// 沒達到觸發間隔，重新設定定時器} else {timeout = setTimeout(method, delay);} };

總結

以上是生活随笔為你收集整理的JS的节流、防抖的全部內容，希望文章能夠幫你解決所遇到的問題。

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