javascript函數防抖

SmallBoyO 發布于2019-08-26 11:52 / 1503人閱讀

摘要：而此時是作為定時器的一個參數，指向，需要更正指向。修改防抖函數立即執行防抖函數中使用了定時器，事件觸發后會延遲一定時間才調用事件函數，有時我們希望觸發事件可以立即執行，然后需要秒后才能重新觸發執行。

函數防抖 (debounce)

函數防抖是頻繁發生的情況下，當有足夠的空閑時間，才會執行代碼一次，是優化高頻率執行代碼的一種手段。實際開發中會遇到頻發觸發事件的情況，比如 resize, scroll, mousemove 事件。

原理

事件觸發 n 秒后執行，如果在這 n 秒內再次觸發，則以新的事件時間為準，n 秒后執行。無論觸發多少次，都要等到最后一次觸發 n 秒后才執行。

實現

用 mousemove舉例，當鼠標移入時，在 div 內顯示事件函數執行的次數。防抖的簡單實現如下：

let count = 0;
let oDiv = document.querySelector("#container");

//防抖函數
function debounce(fn, delay) {
    let timer;
    
    return function() {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
    }
}

//事件函數
function eventFn() {
    oDiv.innerHTML = ++count;
}

oDiv.onmousemove = debounce(eventFn, 1000);

this指向

正常情況下，在事件函數中使用 this 指向該事件綁定的元素。而此時 eventFn 是作為定時器的一個參數，this 指向 window ，需要更正 this 指向。

function debounce(fn, delay) {
    let timer;
    
    return function() {
        let _this = this;
        
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(_this);
        }, delay);
    }
}

event對象

一般情況下，事件函數 eventFn 的第一個參數為 event 對象，但此時，值為 undefined。修改防抖函數：

function debounce(fn, delay) {
    let timer;
    
    return function() {
        let _this = this;
        let opt = arguments;
        
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(_this, arguments);
        }, delay);
    }
}

立即執行

防抖函數中使用了定時器，事件觸發后會延遲一定時間才調用事件函數，有時我們希望觸發事件可以立即執行，然后需要 n 秒后才能重新觸發執行。我們通過傳入第三個參數，判斷是否需要立即執行。

function debounce(fn, delay, immediate) {
    let timer;
    
    return function() {
        let _this = this;
        let opt = arguments;
        
        timer && clearTimeout(timer);
        if(immediate) {
            let call = !timer;
            timer = setTimeout(function() {
                timer = false;
            }, delay);
            
            call && fn.apply(_this, opt);
        } else {
            timer = setTimeout(function() {
                 fn.apply(_this, opt);
             }, delay);
        }    }
}

云服務器 GPU云服務器 javascript 函數 javascript函數 JavaScript函數編程 javascript函數對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107721.html

說說JavaScript中函數的防抖 (Debounce) 與節流 (Throttle)

摘要：基礎防抖我們現在寫一個最基礎的防抖處理標記事件也做如下改寫現在試一下，我們會發現只有我們停止滾動秒鐘的時候，控制臺才會打印出一行隨機數。為何要防抖和節流有時候會在項目開發中頻繁地觸發一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
js 防抖節流 JavaScript

摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。 js 防抖節流 JavaScript 實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整DOM的渲染；如ke...

int64 2019-08-23 14:48 評論0 收藏0
JavaScript防抖和節流

摘要：概念函數防抖和函數節流，兩者都是優化高頻率執行代碼的一種手段。防抖任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流指定時間間隔內只會執行一次任務一定時間內方法只跑一次。概念函數防抖和函數節流，兩者都是優化高頻率執行js代碼的一種手段。防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流：指定時間間隔內只會執行一次任...

DevWiki 2019-08-23 17:09 評論0 收藏0
JavaScript：函數防抖與函數節流

摘要：函數防抖簡單實現模擬請求獲取函數的作用域和變量清除定時器節流名詞解釋連續執行函數，每隔一定時間執行函數。效果函數防抖是某一段時間內只執行一次函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。防抖（debounce）名詞解釋：在事件被觸發n秒后再執行回調函數，如果在這n秒內又被觸發，則重新計時。使用場景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評論0 收藏0
JavaScript之節流與防抖

摘要：個人博客原文地址背景我們在開發的過程中會經常使用如等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。個人博客原文地址背景我們在開發的過程中會經常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。因此針對這類事件要進行節流或者防抖處理節流節流的意思...

wayneli 2019-08-23 10:33 評論0 收藏0