性能-防抖和節流

piglei 發布于2019-08-01 17:06 / 2781人閱讀

摘要：一概述為了提高頁面性能，有時需要對高頻率觸發的事件進行防抖或者節流處理。強調一系列連續觸發的事件。防抖的目的就是把，，構成的系列或者，構成的系列事件合并成一個，即只執行或者或者。節流一段時間內的事件，只處理一次，即只調用一次事件處理程序。

一、概述

為了提高頁面性能，有時需要對高頻率觸發的事件（scrllo, resize, mousemove, touchmove）進行防抖（Debounce）或者節流（Throttle）處理。這兩個概念很相似，但是他們是不同的概念：

1.1 防抖

把一系列連續的事件，只處理一次，即只調用一次事件處理程序。強調一系列連續觸發的事件。

1.2 一系列事件

防抖中注意一個問題：什么是一系列事件？在指定時間間隔（距離上次觸發的時間）內觸發的相同類型事件視為一個系列的事件。
如：假如scroll事件分別在0，1，3，7，8時間觸發了事件A，B，C，D，E。假如規定時間間隔為2，則A，B，C屬于一個系列（D，C之間間隔為3）；D，E屬于一個系列。防抖的目的就是把A，B，C構成的系列（或者D，E構成的系列）事件合并成一個，即只執行A或者C（D或者E）。

1.3 節流：

一段時間內的事件，只處理一次，即只調用一次事件處理程序。強調一段時間內。

二、防抖的簡單實現 2.1 V1

根據上面的概念實現一個簡單的代碼V1：

var debounce = function(func, delay){
        var timeHandle = null;
        return function(){
            var context = this, 
                args = arguments, 
                later = function(){
                    func.apply(context, arguments);
                };
            if(timeHandle) {
                clearTimeout(timeHandle); // 覆蓋上次事件回調：清除上次未執行的回調，新建個回調執行定時器
            }
            timeHandle = setTimeout(later, delay);
        }
    }

功能如：

事件處理程序在一系列事件觸發后delay時間后執行。

三、節流的簡單實現 3.1 V1

根據概念實現各簡單的V1：

var throttle = function(func, delay){
        var previous = 0;
        return function(){
            var context = this,
                args = arguments,
                curr = Date.now();
            // 如果時間間隔超過delay時間，則執行回調
            if(curr - previous >= delay){
                previous = curr; // 更新previous
                func.apply(context, args);
            }
            console.log(curr)
        }
    }

四、其他庫中的debounce, throttle

具體實現可疑參考下其他庫，畢竟使用的人多，也更合理。
underscoreJS

參考：

http://www.tuicool.com/articl...
http://web.jobbole.com/86158/
防抖DEMO：http://codepen.io/dcorb/pen/K...

云服務器 GPU云服務器 VUE防抖與節流防抖 VUE防抖函數節流

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50945.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
性能-防抖和節流

摘要：一概述為了提高頁面性能，有時需要對高頻率觸發的事件進行防抖或者節流處理。強調一系列連續觸發的事件。防抖的目的就是把，，構成的系列或者，構成的系列事件合并成一個，即只執行或者或者。節流一段時間內的事件，只處理一次，即只調用一次事件處理程序。一、概述為了提高頁面性能，有時需要對高頻率觸發的事件（scrllo, resize, mousemove, touchmove）進行防抖（Debo...

zhjx922 2019-08-20 17:43 評論0 收藏0
淺談js防抖和節流

摘要：防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點掌握的。（信我，你看完肯定就懂了）從滾動條監聽的例子說起先說一個常見的功能，很多網站會提供這么一個按鈕：用于返回頂部。showImg(ht...

opengps 2019-08-26 13:32 評論0 收藏0
函數的防抖和節流是個啥？？？

摘要：函數防抖和節流，都是控制事件觸發頻率的方法。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調傳進去，等待一段時間過后執行目標函數第二點實現了，再看第一點持續觸發不執行。曾經面試時候被問到過這個，年少的我一臉無知。。。后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的u...

edagarli 2019-08-23 18:35 評論0 收藏0