1. 程式人生 > >節流和防抖的實現

節流和防抖的實現

輸入法 事件 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),如果大於設置的時間周期,就執行函數,然後更新時間戳為當前的時間戳,如果小於,就不執行。 > + 缺陷:第一次事件會立即執行,停止觸發後沒辦法再激活事件。
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. 使用定時器 >+ 原理:當觸發事件的時候,我們設置一個定時器,再觸發事件的時候,如果定時器存在,就不執行,直到定時器執行,然後執行函數,清空定時器,這樣就可以設置下個定時器。 >+ 缺陷:第一次事件會在n秒後執行,停止觸發後依然會再執行一次事件。
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)
        }
    }
}

原文地址: 節流和防抖的實現

節流和防抖的實現