JS函數節流防抖

ARGUS 發布于2019-08-21 17:06 / 3010人閱讀

摘要：函數節流和函數防抖就是為了解決類似需求應運而生的。場景實時搜索拖拽實現實現函數節流和函數防抖都是通過延時邏輯操作來提升性能的方法，在前端優化中是常見且重要的解決方式。

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

原文鏈接

函數節流(throttle)

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

場景：

窗口調整（resize）

頁面滾動（scroll）

搶購瘋狂點擊（mousedown）

實現：

function throttle(method, delay){
    var last = 0;
    return function (){
        var now = +new Date();
        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}

document.getElementById("throttle").onclick = throttle(function(){console.log("click")},2000);

underscore實現：

_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function() {
        var now = _.now();
        if (!previous && options.leading === false) previous = now;
        //計算剩余時間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        //剩余時間小于等于0或者剩余時間大于等待時間(本地時間變動出現)
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

函數防抖(debounce)

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

場景：

實時搜索（keyup）

拖拽（mousemove）

實現：

function debounce(method, delay){
    var timer = null;
    return function(){
        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}

document.getElementById("debounce").onclick = debounce(function(){console.log("click")},2000);

underscore實現：

_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    var later = function() {
        var last = _.now() - timestamp;
        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };
    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        var callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
        return result;
    };
};

函數節流(throttle)和函數防抖(debounce)都是通過延時邏輯操作來提升性能的方法，在前端優化中是常見且重要的解決方式。可以從概念和實際應用中理解兩者的區別，在需要的時候選擇合適的方法處理。

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

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

詳談js防抖和節流

摘要：本文會分別介紹什么是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函數而導致的性能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。本文由小芭樂發表 0. 引入首先舉一個例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節流的效果，這里附上完整可執行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0
徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
JS進階篇3---函數“節流” VS “防抖”

摘要：目的都是為了降低回調函數執行頻率，節省計算機資源，優化性能，提升用戶體驗。函數防抖事件頻繁觸發的情況下，只有經過足夠的空閑時間，才執行代碼一次。函數節流和函數防抖的對比分析一、前言前端開發中，函數節流（throttle）和函數防抖（debounce）作為常用的性能優化方法，兩者都是用于優化高頻率執行 js 代碼的手段，那具體它們有什么異同點呢？有對這兩個概念不太了解的小伙伴...

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

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

int64 2019-08-23 14:48 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0