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 相关文章推荐
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
Vue异步加载about组件
Oct 31 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
React路由管理之React Router总结
May 10 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript 定时器详情
Nov 11 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
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
Less 安装及基本用法
2018/05/05 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python中数字是否为可变类型
2020/07/08 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
后勤部长岗位职责
2013/12/14 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
大学班干部竞选稿
2015/11/20 职场文书
医学会议开幕词
2016/03/03 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Python基础 括号()[]{}的详解
2021/11/07 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python