前端函數防抖(debounce)和函數節流(throttle)

防抖&節流

在前端開發中一部分的用戶行為會頻繁的出發事件執行，對DOM操作、資源加載等耗費性能的處理，很可能導致界面卡頓，甚至瀏覽器的崩潰。函數防抖(debounce)和函數節流(throttle)就是為了解決類似的需求應運而生的。

 

• 防抖

函數防抖就是在函數需要頻繁觸發情況時，只有足夠空閑的時間，才執行一次。好像公交車司機會等全部人上車后才出站一樣。

 

應用場景：實時搜索（keyup）、拖拽（mousemove）

 

var input = document.getElementsByTagName('input')[0]; var timer = null; function ajax() { console.log(this.value); } input.oninput = function () { 　　var _self = this,
 _arg = arguments;
　　clearTimeout(timer);
　　timer = setTimeout(function () {
　　　　ajax.apply(_self, _arg);
　　}, 1000);
 }

 

封裝防抖函數

function debounce(handler, delay) { var timer = null; return function () { var _self = this, _arg = arguments; clearTimeout(timer); timer = setTimeout(function () { handler.apply(_self, _arg); }, delay); } }

 

• 節流

函數節流就是預定一個函數只有在大於等於執行周期時才執行，周期內調用不執行。好像水滴攢到一定重量才會落下。

 

應用場景：窗口調整(resize)、頁面滾動(scroll)、搶購瘋狂點擊(mousedowm)

 

function throttle(handler, wait) { var lastTime = 0; return function () { var nowTime = new Date().getTime(); if (nowTime - lastTime > wait) { handler.apply(this, arguments); lastTime = nowTime; } } }