原生js物件導向實現函式節流 郝晨光

函式節流（throttle）

限制乙個函式在一定時間內只能執行一次。

當事件不需要頻繁的被觸發，但是由於特定dom事件的原因不斷的觸發事件的時候

如：input事件，resize事件，scroll事件，mousemove事件，touchmove事件等只要發生操作就會頻繁觸發的事件

例如：scroll滾動載入，scroll滾動控制頭部顯示隱藏input輸入內容開始搜尋防止使用者高頻率操作提交多次表單·······

/**

* @class throttle
* @param  callback  需要觸發的事件
* @param  interval  觸發事件的間隔時間
* @return  返回throttle例項 
*/function
throttle
(callback, interval)
else
}// 節流函式的實現
throttle.prototype.
throttle
=function
(...args)
// 如果當前存在執行中的定時器的話，直接返回，避免重複觸發事件，避免重複觸發定時器if(
this
.timer)
// 如果不存在定時器的話，定義定時器
this
.timer =
settimeout((
)=>
, _this.interval);}
;// off方法，關閉定時器
throttle.prototype.
off=
function()
;

const

changescroll
= e =>
let mythrottle =
newthrottle
(changescroll,
1000);
window.
addeventlistener
('scroll'
, e => mythrottle.
throttle
(e),
false
);

js原生函式節流

函式節流就是一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。時間戳方案 function throttle fn,wait function handle window.addeventlistener mousemove throttle handle,1000 定時器方案 f...

js函式節流（Throttle）

在瀏覽器 dom 事件裡面，有一些事件會隨著使用者的操作不間斷觸發。比如 重新調整瀏覽器視窗大小 resize 瀏覽器頁面滾動 scroll 滑鼠移動 mousemove 也就是說使用者在觸發這些瀏覽器操作的時候，如果指令碼裡面繫結了對應的事件處理方法，這個方法就不停的觸發。而當事件處理比較複雜的時...

JS總結 （一）函式節流

本篇思考三個問題 什麼是函式節流？為什麼要使用函式節流？如何實現？一 基本思想 某些 不可以在沒有間斷的情況連續重複執行。二 使用原因 dom操作比起非dom互動，需要更多的記憶體和cpu時間，連續嘗試過多的dom操作可能會導致瀏覽器掛起，甚至崩潰。三 實現方式 使用定時器對函式進行節流，即第一次呼...