函数节流函数防抖的区别

原创 2018年04月17日 08:39:38

一、概念解释

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

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

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

二、函数节流

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 函数节流
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中。理解了函数节流的关卡设置重点,其实改起来就简单多了。

三、函数防抖

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

?
1
2
3
4
5
6
7
8
// 函数防抖
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做缓存池,而且可以轻易地清除待执行的代码。

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


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qwe502763576/article/details/79969251

函数防抖与函数节流

概念函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于...
  • w_q_1025
  • w_q_1025
  • 2017-03-20 23:45:15
  • 808

事件委托、函数节流及防抖

一、事件委托: JS事件处理程序的性能缺陷: 由于事件处理程序可以为现代web应用程序提供交互能力,因此许多开发人员会部分青红皂白的向页面中添加大量的处理程序。在创建GUI的语言(比如C#)中,为G...
  • jinboker
  • jinboker
  • 2016-08-05 11:43:10
  • 2376

函数节流和防抖动

函数节流
  • magicfly9527
  • magicfly9527
  • 2016-05-25 09:55:34
  • 994

js函数防抖与函数节流

区别 de(bounce防抖):当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。比如:如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。 throttle...
  • hj7jay
  • hj7jay
  • 2017-02-09 09:26:31
  • 2663

js resize、scroll函数节流与函数防抖

resize和scroll方法会触发时频繁调用,致使页面产生性能问题,所以我们使用函数节流和函数防抖来解决函数防抖//scroll方法中的do somthing至少间隔500毫秒执行一次 window...
  • qq_17335153
  • qq_17335153
  • 2016-09-19 21:56:12
  • 1931

函数防抖与节流

一、概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变...
  • p358278505
  • p358278505
  • 2017-07-28 14:49:47
  • 313

js对频繁触发事件的函数防抖和函数节流

1.场景 函数防抖:注册时邮箱的输入框,随着用户的输入,实时判断邮箱格式是否正确。此时,每一次的用户输入都触发邮箱格式检测事件,造成了浪费,于是设置两次输入之间的时间间隔大于1s时(用户结束输入时)...
  • xuanwuziyou
  • xuanwuziyou
  • 2017-07-27 17:52:47
  • 1744

函数节流与防抖(参考lodash)

function debounce(fn, delay, immediate){ var timeout, args, context, timesta...
  • qq_34893429
  • qq_34893429
  • 2017-09-21 23:15:42
  • 350

js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)

在浏览器中操作DOM比非DOM交互需要更多的内存和CPU的事件,连续尝试进行过多的DOM相关操作可能UI导致浏览器挂起,有时甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生,当调...
  • charlene0824
  • charlene0824
  • 2016-07-31 19:15:52
  • 5135

函数节流与函数防抖

有些浏览器事件会被用户在很短的时间内触发很多次,例如点击事件或滚动页面。如果你给窗口滚动事件添加一个事件监听函数(事件句柄),然后用户不停地快速上下滚动页面,那你的事件可能在一秒之内都会被触发很多次,...
  • Honeymao
  • Honeymao
  • 2017-03-23 18:18:46
  • 383
收藏助手
不良信息举报
您举报文章:函数节流函数防抖的区别
举报原因:
原因补充:

(最多只允许输入30个字)