专栏首页前端达人简单复习下什么是JavaScript的防抖和节流

简单复习下什么是JavaScript的防抖和节流

来源 | https://www.cnblogs.com/echoyya/p/14565642.html

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

以监听页面滚动为例,分别看一下普通滚动,函数节流,函数防抖三者的实现效果。

函数节流

函数节流:是指在高频事件触发期间,n秒内函数只会执行一次。

  • 比如人眨眼睛,就是一定时间内眨一次。
  • 再比如就是游戏中的技能CD,按下技能以后,再规定的时间内,你再按也没用,只能冷却好了再按。

使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等

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

  timer = setTimeout(function(){
    console.log("函数防抖");
  }, 1000);
};

函数防抖的要点:也需要一个定时器来辅助实现代码延迟执行。如果计时未完之前,方法被多次触发,则清除上次记录的定时器标记,重新开始。

若计时完毕,没有继续触发方法,则执行逻辑代码。

  1. 监听id = debounce元素的滚动事件,首先就是清除上次未执行的setTimeout的引用timer
  2. clearTimeout方法,允许传入无效的值。所以直接执行clearTimeout即可。
  3. 将需要执行的代码放入setTimeout定时器中,再返回定时器引用给timer缓存。
  4. 如果倒计时结束,没有新的方法触发滚动事件,则执行setTimeout中的代码。
  5. 函数防抖的原理,就是巧用setTimeout做缓存池,并且可以轻易地清除待执行代码。

函数防抖

函数防抖,是指触发高频事件n秒后函数会执行一次,如果n秒内高频事件被再次触发,则重新计算时间;在整个过程中,事件函数只会被执行一次。

  • 比如坐公交,在一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有没有人再刷卡了,司机才开车。
  • 再比如游戏中的buff,吃了bull,开始倒计时,此时又吃了一个buff,则重新记时。

使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等

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

  canRun = false;
  setTimeout(function(){
    console.log("函数节流");
    canRun = true;
  }, 1000);
}

函数节流的要点:声明一个标志位,设置执行的时间间隔,记录当前代码是否在执行,如果空闲,则可以正常触发方法执行,反之则取消这次方法执行,直接return。

  • 监听id = throttle元素的滚动事件。当canRun为true,代表当前滚动处理事件是空闲的,可以使用。然后下一步的操作就是canRun=false。这样其他请求执行滚动事件的方法,就被return。
  • setTimeout设置1000ms时间间隔,执行定时器中的回调函数,释放标志位,允许执行下一次滚动事件。
  • 若具体执行的方法是一个回调函数,也可以将canRun=true放到callback中。只要理解了函数节流基本原理,改造就会得心应手。

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 7分钟理解JS的节流、防抖及使用场景前言概念和例子总结拓展

    据说阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go!

    用户2356368
  • 前端进阶第4周打卡题目汇总

    1. 解释一下在js里,0.1+0.2为什么等于0.30000000000000004,如何通过代码解决这个问题?

    徐小夕
  • 前端高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

    哲洛不闹
  • SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍

    这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章。

    Jerry Wang
  • 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用

    前端开发者对函数防抖和函数节流或多或少有些了解,最近在做一个H5编辑器的项目,由于画布功能复杂,计算量较大,在鼠标拖拽操作时尤其是在低配电脑上能够明显感受到卡顿...

    CS逍遥剑仙
  • 前端性能优化之防抖与节流,大幅度降低你的事件处理性能

    看到这个标题就懵了, 你会有以下几个问题:什么是防抖? 什么是节流? 如何使用防抖? 如何使用节流? 什么时候需要用到防抖和节流? 为什么要用防抖和节流? 那我...

    @零一
  • 【前端性能】高性能滚动 scroll 及页面渲染优化

    Sb_Coco
  • 每日两题 T3

    遍历数组的同时,将元素放入数组,然后取出数组中间元素,但是会有内存额外开销,时间复杂度

    合一大师
  • 阿里巴巴内推一面过程

    一面是有个人给我打的电话跟我约了一个面试时间,他们人真的很好,是按你的时间来,如果有事就可以往后延。然后我约了今天晚上7点半,于是就开始了我的一面,我面完试赶紧...

    @零一

扫码关注云+社区

领取腾讯云代金券