JavaScript函数节流和函数防抖之间的区别


Posted in Javascript onFebruary 15, 2017

一、概念解释

函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。

大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。

同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。

函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

二、函数节流

函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。以下是监听页面元素滚动的示例代码:

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
 if(!canRun){
 // 判断是否已空闲,如果在执行中,则直接return
 return;
 }
 canRun = false;
 setTimeout(function(){
 console.log("函数节流");
 canRun = true;
 }, 300);
};

函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。

如果空闲,则可以正常触发方法执行。

如果代码正在执行,则取消这次方法执行,直接return。

这个方法的作用是监听ID为throttle元素的滚动事件。

当canRun为true,则代表现在的滚动处理事件是空闲的,可以使用。

通过关卡if(!canRun),等于就拿到了通行证。然后下一步的操作就是立马将关卡关上canRun=false。这样,其他请求执行滚动事件的方法,就被挡回去了。

接着用setTimeout规定最小的时间间隔300,接着再执行setTimeout方法体里面的内容。

最后,等setTimeout里面的方法都执行完毕,才释放关卡canRun=true,允许下一个访问者进来。

这个函数节流的实现形式,需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的,也可以将canRun=true这一步放到callback中。理解了函数节流的关卡设置重点,其实改起来就简单多了。

三、函数防抖

函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。以下还是以页面元素滚动监听的例子,来进行解析:

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
 clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
 timer = setTimeout(function(){
 console.log("函数防抖");
 }, 300);
};

函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。

如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。

如果计时完毕,没有方法进来访问触发,则执行代码。

这个方法的作用是监听ID为debounce元素的滚动事件

进入滚动事件方法体的时候,做的第一件事就是清除上次未执行的setTimeout。而setTimeout的引用id由变量timer记录。

clearTimeout方法,允许传入无效的值。所以这里直接执行clearTimeout即可。

然后,将需要执行的代码放入setTimeout中,再返回setTimeout引用给timer缓存。

如果倒计时300ms以后,还没有新的方法触发滚动事件,则执行setTimeout中的代码。

函数防抖的实现重点,就是巧用setTimeout做缓存池,而且可以轻易地清除待执行的代码。

其实,用队列的方式也可以做到这种效果。这里就不深入了。

四、在线demo

JavaScript函数节流和函数防抖之间的区别

这是我写的一个测试demo,把鼠标移动到模块上方,滚动滚轮,即可在控制台查看输出效果。

demo地址:https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
JavaScript Date对象使用总结
May 14 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 #Javascript
基于canvas的二维码邀请函生成插件
Feb 14 #Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 #Javascript
javascript深拷贝和浅拷贝详解
Feb 14 #Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 #Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 #Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
You might like
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
js字符编码函数区别分析
2011/12/28 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python编写弹球游戏的实现代码
2018/03/12 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
优秀求职信范文分享
2013/12/19 职场文书
团组织关系介绍信
2014/01/12 职场文书
学习十八大报告感言
2014/02/04 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android