性能-防抖和節(jié)流

zhjx922 發(fā)布于2019-08-20 17:43 / 2440人閱讀

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

一、概述

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

1.1 防抖

把一系列連續(xù)的事件，只處理一次，即只調用一次事件處理程序。強調一系列連續(xù)觸發(fā)的事件。

1.2 一系列事件

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

1.3 節(jié)流：

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

二、防抖的簡單實現(xiàn) 2.1 V1

根據(jù)上面的概念實現(xiàn)一個簡單的代碼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); // 覆蓋上次事件回調：清除上次未執(zhí)行的回調，新建個回調執(zhí)行定時器
            }
            timeHandle = setTimeout(later, delay);
        }
    }

功能如：

事件處理程序在一系列事件觸發(fā)后delay時間后執(zhí)行。

三、節(jié)流的簡單實現(xiàn) 3.1 V1

根據(jù)概念實現(xiàn)各簡單的V1：

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

四、其他庫中的debounce, throttle

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

參考：

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

GPU云服務器云服務器 VUE防抖與節(jié)流防抖 VUE防抖函數(shù)節(jié)流

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/83807.html

詳談js防抖和節(jié)流

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

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

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0
性能-防抖和節(jié)流

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

piglei 2019-08-01 17:06 評論0 收藏0
淺談js防抖和節(jié)流

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

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

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

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