性能-防抖和节流

piglei 发布于2019-08-01 17:06 / 2780人阅读

摘要：一概述为了提高页面性能，有时需要对高频率触发的事件进行防抖或者节流处理。强调一系列连续触发的事件。防抖的目的就是把，，构成的系列或者，构成的系列事件合并成一个，即只执行或者或者。节流一段时间内的事件，只处理一次，即只调用一次事件处理程序。

一、概述

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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