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

1.window對象的resize、scroll事件

2.拖拽時的mousemove事件

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

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

函數(shù)防抖(debounce)

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。

---

模擬一段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)})

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

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執(zhí)行了"+scrollnum); }

函數(shù)節(jié)流(throttle)

規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。