節流和防抖的實現
阿新 • • 發佈:2018-10-16
輸入法 事件 target 延時 鼠標 到來 ons 我們 art
1 防抖
+ 定義:合並事件且不會去觸發事件,當一定時間內沒有觸發這個事件時,才真正去觸發事件
+ 原理:對處理函數進行延時操作,若設定的延時到來之前,再次觸發事件,則清楚上一次的延時操作定時器,重新定時
+ 場景:keydown事件上驗證用戶名,輸入法的聯想
+ 實現:
function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout(timer); timer= setTimeout(function() { fn.apply(that, args); }, delay); } }
2 節流 + 定義:持續觸發事件時,合並一定時間內的事件,在間隔一定事件之後再真正觸發事件。每間隔一段事件觸發一次 + 場景:resize改變布局時,onscroll滾動添加加載下面的圖片時。 + 實現: 1. 使用時間戳 > + 原理:當觸發事件的時候,我們取出當前的時間戳,然後減去之前的時間戳(最一開始值設為0),如果大於設置的時間周期,就執行函數,然後更新時間戳為當前的時間戳,如果小於,就不執行。 > + 缺陷:第一次事件會立即執行,停止觸發後沒辦法再激活事件。
function1. 使用定時器 >+ 原理:當觸發事件的時候,我們設置一個定時器,再觸發事件的時候,如果定時器存在,就不執行,直到定時器執行,然後執行函數,清空定時器,這樣就可以設置下個定時器。 >+ 缺陷:第一次事件會在n秒後執行,停止觸發後依然會再執行一次事件。throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } } }
function throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } } }
1. 優化 > + 鼠標移入能立刻執行,停止觸發的時候還能再執行一次
function throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } } }
原文地址: 節流和防抖的實現
節流和防抖的實現