JavaScript函数节流和函数防抖之间的区别
一、概念解释
函数节流和函数防抖,两者都是优化高频率执行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
这是我写的一个测试demo,把鼠标移动到模块上方,滚动滚轮,即可在控制台查看输出效果。
demo地址:https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html
阅读原文:http://www.jianshu.com/p/b73c2acad696
JavaScript函数节流和函数防抖之间的区别的更多相关文章
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- 函数节流throttle和防抖debounce
throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 函数节流和函数防抖JavaScript实现
函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...
随机推荐
- 一致性Hash算法介绍(分布式环境算法)
32的整数环(这个环被称作一致性Hash环),根据节点名称的Hash值(其分布范围同样为0~232)将节点放置在这个Hash 环上.然后根据KEY值计算得到其Hash值(其分布范围也同样为0~232 ...
- 用Fiddler在Android上抓包(Http+https)
Fiddler是一个HTTP协议调试代理工具,在开发网络应用的时候经常会用到,其最基本的作用是能抓HTTP的数据包,当然它还有更高级的用法,如添加断点.修改请求与相应的数据等等... 抓HTTP包 安 ...
- html案例详解(一)
一.入门. <html> <!-- 头信息的作用 1. 可以设置网页的标题. 2. 可以通知浏览使用指定的码表解释html页面. 3. --> <head> < ...
- MySQL错误“Specified key was too long; max key length is 1000 bytes”的解决办法
MySQL错误"Specified key was too long; max key length is 1000 bytes"的解决办法 经过查询才知道,是Mysql的字段设置 ...
- (NO.00002)iOS游戏精灵战争雏形(二)
在SpriteBuilder中新建Images文件夹,将所需要的图片素材全部拖入其中: 别忘了将其转换为智能精灵图表文件夹. 因为我们不需要为ipad和安卓设计,所以在项目设置里将所有出iphone以 ...
- 《java入门第一季》之面向对象(final关键字)
/* final可以修饰类,方法,变量 特点: final(可以修饰类),该(类)(不能被继承).一旦修饰了一个类,这个类就不能被继承了! final以修饰方法,该方法可以被继承但是不能被重写.(覆盖 ...
- Android编译系统中的Kconfig,Makefile,.config编译系统浅析
在对Android进行编译时,用的就是Linux下的Makefile和Kconfig编译系统,对整个系统进行编译.当然还包括很多配置命令,比如make defconfig, make oldconfi ...
- Android虚拟设备访问WebSocket问题
Android虚拟设备访问WebSocket问题 最近写erlang的WebSocket网站,需要运行在RHEL6上,用Android设备访问. 可惜AVD无法访问主机 Win7上的虚拟机(RHEL6 ...
- OpenCV——色调映射
// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...
- ubuntu 输入用户名密码又回到登陆界面
问题描述: 输入正确的用户名密码,登陆后又返回登陆界面,重复出现. 问题解决: 环境变量出错,重新配置环境变量. 1.进入命令行模式Ctrl+Alt+F*,然后输入用户名密码: 2.登进去之后,以管理 ...