性能-防抖和节流

最新推荐文章于 2025-04-23 20:27:26 发布

转载最新推荐文章于 2025-04-23 20:27:26 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010017614

本文介绍了如何通过防抖（Debounce）和节流（Throttle）来优化频繁触发的事件处理，如scroll和resize等，以提升网页性能。并提供了两种方法的具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

为了提高页面性能，有时需要对高频率触发的事件（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...