js 防抖节流和rAF

最新推荐文章于 2024-09-17 13:42:29 发布
最新推荐文章于 2024-09-17 13:42:29 发布
阅读量56 收藏
点赞数
文章标签： javascript okhttp 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/134508552
版权

原文链接: js 防抖节流和rAF

上一篇: 理解和使用 ES6 中的 Symbol

下一篇: vue-fun-api 使用

防抖: 在持续触发某个事件时, 只会在持续间隔大于delay的时候触发一次

节流: 在持续触发某个事件的时候, 按照给定的间隔真正执行函数

rAF: 浏览器js动画api

https://zhuanlan.zhihu.com/p/51608574

1.1 什么是防抖

在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时。

1.2 应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询 ajax 请求，这样可以有效减少请求次数，节约请求资源；

(2) window 的 resize、scroll 事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次； 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="input">

</body>

<script>
  function debounce(fun, delay) {
    return function (args) {
      //获取函数的作用域和变量
      let that = this
      let _args = args
      //每次事件被触发，都会清除当前的timer，然后重写设置超时调用
      clearTimeout(fun.id)
      fun.id = setTimeout(function () {
        fun.call(that, _args)
      }, delay)
    }
  }

  function ajax() {
    console.log('ajax')
  }

  let input = document.getElementById('input')
  input.addEventListener('keyup', debounce(ajax, 1000))
</script>
</html>

代码说明：

1. 每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

2. 只有当高频事件停止，最后一次事件触发的超时调用才能在 delay 时间后执行；

效果：

加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。

2. 节流（throttle）

2.1 什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.2 应用场景

(1) 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2) 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3) 监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断； 

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <title>加入节流</title>
  <style type="text/css"></style>
  <script type="text/javascript">
    window.onload = function () {
      //模拟ajax请求
      function ajax(content) {
        console.log('ajax request ' + content)
      }

      function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
          let that = this;
          let _args = arguments
          let now = +new Date();
          if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
              last = now;
              fun.apply(that, _args);
            }, delay)
          } else {
            last = now;
            fun.apply(that, _args);
          }
        }
      }

      let throttleAjax = throttle(ajax, 1000)
      let inputThrottle = document.getElementById('throttle')
      inputThrottle.addEventListener('keyup', function (e) {
        throttleAjax(e.target.value)
      })
    }
  </script>
</head>
​
<body>
<div>
  3.加入节流后的输入：
  <input type="text" name="throttle" id="throttle">
</div>
</body>
​
</html>

效果：实验可发现在持续输入时，会照代码中的设定，每 1 秒执行一次 ajax 请求

3. 小结

总结下防抖和节流的区别：

-- 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

-- 原理：

防抖是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

v2-e3b001999023cec4407f96a1ce63a1ca_hd.jpg

连续触发结束时执行，而我们现在说的 “前摇” 则是下面这种情况

v2-64d744df8bffe5ccbced0cf4cfb7d9c8_hd.jpg

在连续触发的一开始就执行了，然后往后的连续触发不执行，连续触发停止后再经过延时时间后触发才会再次执行

下面是我自己写的，大概意思是这样，代码实现也贴出来

v2-1c5a064e534d6db9c85fe9bb2e0b526f_b.jpg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>电梯上人</title>
  <style>

  </style>
</head>
<body>
  <button id="addBtn">电梯上人，人数+1</button><button id="resetBtn">重置</button>
  <p id="personNum">电梯人数：0（假设电梯可以无限装人）</p>
  <script>
    var personNum = 0; // 电梯人数
    var okNext = true; // 是否可进行下次执行
    var timeoutFn = null;
    var addBtn = document.getElementById('addBtn'); // 获取添加人数按钮
    var personNumP = document.getElementById('personNum'); // 获取显示人数的标签
    var resetBtn = document.getElementById('resetBtn'); // 获取重置按钮
    /**
     * @method 电梯添加人数
     * @description 电梯可以上人，但是上人以后就不能再上了，不管怎么触发都不行，除非停止触发500毫秒以后，再触发的时候才可以继续执行
     */
    function addPerson() {
      if (okNext) {
        okNext = false;
        personNum ++
        personNumP.innerHTML = `电梯人数：${personNum}（假设电梯可以无限装人）`
      }
      clearTimeout(timeoutFn);
      timeoutFn = setTimeout(function () {
        okNext = true;
      }, 500)
    }
    /**
     * @method 重置
     */
    function reset() {
      personNum = 0;
      personNumP.innerHTML = '电梯人数：0（假设电梯可以无限装人）';
    }

    addBtn.addEventListener('click', addPerson);
    resetBtn.addEventListener('click', reset);
  </script>
</body>
</html>

上面代码要是看不太明白，可以直接粘下去自己执行以下看看是什么感觉，就知道是什么意思了。

代码纯我自己写的，要是有不对的地方，请大佬指正啊

Throttle 节流

什么是节流

节流呢，也是我自己的理解，在连续触发一个方法的某一时间段中，控制方法的执行次数。

同样举个例子吧，一个地铁进站闸口，10 秒进一个人（10 秒内执行一个方法），管这 10 秒中来了是 5 个人、10 个人还是 20 个人，都只是进一个人（从第一次触发后 10 秒不管被触发多少次都不会执行，直到下一个 10 秒才会再执行）。

如何实现呢？？

时间戳

我们首先用时间戳来判断前后的时间间隔，然后就可以知道我从上次执行完这个方法过了多久，过了这么长时间，是不是已经超过了自己规定的时长，如果时长超过了，我就可以再次执行了

v2-5c821eb654f131938aa198920410bccd_b.jpg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地铁进站</title>
</head>
<body>
  <button id="addBtn">进站人数+1</button><button id="resetBtn">重置</button>
  <p id="personTotal">旅客总人数：0</p>
  <p id="personNum">进站人数：0</p>
  <script>
    var personNum = 0; // 进站人数
    var personTotal = 0; // 一共来了多少人
    var addBtn = document.getElementById('addBtn'); // 获取添加人数按钮
    var personNumP = document.getElementById('personNum'); // 获取显示人数的标签
    var personTotalP = document.getElementById('personTotal'); // 获取显示总人数的标签
    var resetBtn = document.getElementById('resetBtn'); // 获取重置按钮
    /**
     * @method 增加进站人数
     * @description 每个时间间隔执行的方法
     */
    function addPerson() {
      personNum ++;
      personNumP.innerHTML = `进站人数：${personNum}`;
    }
    /**
     * @method 节流方法（时间戳）
     * @param {Function} fn 需要节流的实际方法
     * @param {Number} wait 需要控制的时间长度
     * @description 根据上一次执行的时间，和这一次执行的时间做比较，如果大于控制的时间，就可以执行
     */
    function throttle(fn, wait) {
      var prev = 0; // 第一次执行的时候是0，所以第一次点击的时候肯定大于这个数，所以会立马执行
      return function () {
        var context = this;
        var args = arguments;
        var now = Date.now(); // 实际执行的时间
        personTotal ++;
        personTotalP.innerHTML = `旅客总人数：${personTotal}`;
        if (now - prev >= wait) { // 执行的时间是不是比上次执行的时间大于需要延迟的时间，大于，我们就执行
          fn.apply(context, args);
          prev = now; // 执行了以后，重置上一次执行的时间为刚刚执行这次函数的时间，下次执行就用这个时间为基准
        }
      }
    }
    /**
     * @method 重置
     */
    function reset() {
      personNum = 0;
      personTotal = 0;
      personNumP.innerHTML = '进站人数：0';
      personTotalP.innerHTML = `旅客总人数：0`;
    }

    addBtn.addEventListener('click', throttle(addPerson, 1000));
    resetBtn.addEventListener('click', reset);
  </script>
</body>
</html>

节流函数 throttle 用到了作用域，call、apply 和闭包等相关的知识，看不懂的可以看我之前的文章

  1. 《前端战五渣学 JavaScript—— 闭包》
  2. 《前端战五渣学 JavaScript——call、apply 以及 bind》

上面的代码中我感觉可以很直观的看出来是根据判断前后两次的时间，来得知可不可以进行下一次函数的执行。参考着代码中的注释我觉得应该可以看明白吧😳😳😳

setTimeout

如果我们用 setTimeout 的话，我们只需要更改一下 throttle 方法

v2-e4c5f49e862464c3140f679ebc06cb92_b.jpg

/**
 * @method 节流方法（setTimeout）
 * @param {Function} fn 需要节流的实际方法
 * @param {Number} wait 需要控制的时间长度
 * @description 这个方法就很类似防抖了，就是判断当前函数有没有延迟setTimeout函数，有的话就不执行了
 */
function throttle(fn, wait) {
  var timeout = null; 
  return function () {
    var context = this;
    var args = arguments;
    personTotal ++;
    personTotalP.innerHTML = `旅客总人数：${personTotal}`;
    if (!timeout) { 
      var that = this;
      timeout = setTimeout(() => {
        timeout = null;
        fn.apply(context, args)
      }, wait)
    }
  }
}

虽然我们只需要更改几行代码就实现了用 setTimeout 实现节流的这个方法，但是我们仔细看上面的图，我们可以发现，当我点击第一次的时候，进站旅客是没有增加的，这跟我们实际情况不一样，我们先来的，我不用等啊，我直接就能进站，对不对。还有当我结束增加人数的时候，进站旅客过去等待时间以后还会加一个人，这当然也不是我们想看到的。

使用时间戳还是 setTimeout，取决于业务场景了

rAF(requestAnimationFrame)

诶？？rAF 是什么？什么是 requestAnimationFrame？这在我没有写这篇博客的时候，我根本不知道 window 下还有个这个方法，神奇吧，那这个方法是干什么的呢？？

告诉浏览器 —— 你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。————《MDN Web Docs》

就是在用这个可以一直重绘动画，然后让人看起来是个动画，重绘的这个过程是个很频繁的操作，所以如果我们自己写，不加以干涉，在性能和资源上会造成严重的浪费，所以我们可以使用 requestAnimationFrame 来使用我们的动画看起来很流畅，又不会频繁调用

优点

  1. 目标是 60fps（16 毫秒的一帧），浏览器将决定如何安排渲染的最佳时间。
  2. 相对简单和标准的 API，未来不会改变，减少维护成本。

缺点

  1. rAF 是内部 api，所以我们并不方便修改
  2. 如果浏览器选项卡没有激活，就用不了
  3. 兼容性不好，在 IE9，Opera Mini 和旧 Android 中仍然不支持
  4. node 中不能使用 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>rAF使用</title>
  <style>
    #SomeElementYouWantToAnimate {
      width: 100px;
      height: 100px;
      background-color: #000;
    }
  </style>
</head>
<body>
<div id="SomeElementYouWantToAnimate"></div>
<script>
  var start = null;
  var element = document.getElementById('SomeElementYouWantToAnimate');
  element.style.position = 'absolute';

  /**
   * @method 移动我们的小黑方块
   */
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    element.style.left = Math.min(progress / 10, 200) + 'px';
    if (progress < 2000) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
</script>
</body>
</html>

总结

rAF 是一个内部 api，固定的 16 毫秒执行一次，因为人眼接受 60fps 的动画就会感到很流畅了，如果我们需要改变 rAF 的执行时间，那我们只能自己去写动画的方法，节流还是防抖，看个人爱好了

收官

防抖：连续触发一个函数，不管是触发开始执行还是结束执行，只要在连续触发，就只执行一次

节流：规定时间内只执行一次，不管是规定时间内被触发了多少次

rAF：也算是一种节流手段，原生 api，旨在使动画在尽量少占用资源的情况下使动画流畅

阿豪boy
关注
JS中的定时器requestAnimationFrame 、setTimeout 和setInterval
qq_34754747的博客
04-13 3845
1. requestAnimationFrame定时循环接口 1.1 requestAnimationFrame (rAF) 通知浏览器某个JS代码段在执行动画 浏览器会在每帧即将绘制之前，将这段代码先执行。 requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。不同显示器的刷新率不同 那么如果要实现一个...
JS事件轮询
Col0ring的博客
09-22 1529
此篇文章记录了油管上的一次关于事件循环的演讲，其中剖析了事件环、轮循机制、RAF与微任务，以一篇教程的形式来书写，其中也包含了作者对于事件循环的一点见解。
2020已经过去五分之四了，你确定还不来了解一下JS的rAF?
Tz
10-15 529
不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的rAF吧？？？ rAF 简介 rAF是requestAnimationFrame的简称； 我们先从字面意思上理解requestAnimationFrame，「request - 请求」，「Animation - 动画」， 「Frame - 帧率;框架」，rAF难道是JS的动画框架???，结果显而易见并不是。但确实rAF和动画有关......
js 实现动画的两种方案对比：setTimeout vs RAF (requestAnimationFrame)
朝阳39的博客
03-21 484
/ 4s 把宽度从 20px 变为 620px ，即增加 600px,每次需变化 600 px / (60帧/秒 *4秒) = 15px/帧。// 60帧/s 才能确保动画流畅, 即每 1000/60 = 16.7 ms 执行一次动画。// 得出最终动画效果为 每 16.7 ms ， 宽度增加15px。// 时间需要自己控制。// 时间不用自己控制。
前端战五渣学JavaScript——防抖、节流和rAF
weixin_33819479的博客
05-07 727
看了《JavaScript高级程序设计》和网上的一些博客，感觉对函数节流和函数防抖的概念是反的，以下我写的关于防抖和节流的概念取决于多数人的概念吧，并且基于伦敦前端工程师David Corbacho的客座文章。文章写的很好，并且有对应的代码可以操作，更容易理解。其实我觉得叫什么不重要，这个方法叫节流还是这个方法叫防抖，只要你能说明白，并且在生产中能用上就可以，一个名字，不用太去纠结。 《复仇...
【进阶 6-6 期】深入篇 | 阿里 P6 必会 Lodash 防抖节流函数实现原理
木易杨的博客
07-03 3278
引言 前面几节我们学习了节流函数 throttle，防抖函数 debounce，以及各自如何在 React 项目中进行应用，今天这篇文章主要聊聊 Lodash 中防抖和节流函数是如何实现的，并对源码浅析一二。下篇文章会举几个小例子为切入点，换种方式继续解读源码，敬请期待。 有什么想法或者意见都可以在评论区留言，欢迎大家拍砖。 防抖函数 debounce Lodash 中节流函数比较简单，直接调用防...
JavaScript知识点全面概括与总结(中)
BayMin0-0的博客
03-23 236
61.cookie的理解 cookie 是服务器提供的一种用于维护会话状态信息的数据，通过服务器发送到浏览器，浏览器保存在本地，当下一次有同源的请求时，将保存的 cookie 值添加到请求头部，发送给服务端。这可以用来实现记录用户登录状态等功能。cookie 一般可以存储 4k 大小的数据，并且只能够被同源的网页所共享访问。 服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnl
前端项目的性能优化方案
11-16
JS 优化中，高频事件应使用防抖和节流技术控制执行频率，拆分复杂函数，优化分支结构，使用 RAF 替代 setTimeout 在适当场景，以及利用 Web Worker 将计算密集型任务移出主线程，防止阻塞 UI 渲染。CSS 优化则强调...
【前端性能】高性能滚动 scroll 及页面渲染优化
Teacher_Lee_ZZSXT的博客
01-24 483
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。      滚动优化的由来 滚动优化其实
2022年前端面试题整理，持续更新中
jiey0407的博客
08-01 2848
rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性em是一个相对单位，是相对于父元素字体大小有继承性px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。因为Vue的组件可能会在很多地方使用，会产生多个实例，如果返回的是对象的，这些组件之间的数据是同一份（引用关系），那么修改其中一个组件的数据，另外一个组件的数据都会被修改到。...
JS 动画基础: 细说 requestAnimationFrame
超悠閒的博客
03-30 644
JS 动画基础: 细说 requestAnimationFrame 文章目录JS 动画基础: 细说 requestAnimationFrame简介参考完整示例代码正文`setInterval` 实现动画`setInterval` 的限制`requestAnimationFrame` 实现动画rAF 基础实现rAF 定时调用：timestamprAF 取消回调：`cancelAnimationFrame`渲染、动画分离最终封装版本`requestAnimationFrame` 特性 & 使用注意事项结
帧动画实践
qq_34598178的博客
04-07 1107
本片文章以简单的case说明下，从前端开发角度什么是帧动画呢？
throttle与debounce的区别
weixin_34049032的博客
04-10 157
前几天看到一篇文章，我的公众号里也分享了《一次发现underscore源码bug的经历以及对学术界拿来主义的思考》具体文章详见，微信公众号：文中讲了大家对throttle和debounce存在误解，同时提到了《高程3》中实现节流方法存在一些问题，为了更好的理解这两个概念，搜了很多相关文章，详见文章底部。 throttle与debounce...
requestAnimationFrame 优化动画性能
MichaelAn的博客
02-03 946
常见默认的动画使用 setInterval 处理，然后浏览器渲染的频率是 60 次每秒，所以代码如下。 this.timer = setInterval(() => { fn(); }, 1000 / 60); // 停止动画 clearInterval(this.timer); 这样写，JS 实际执行的间隔，和浏览器渲染重拍的时间不一定完全吻合，性能可能不好。 所以我们引入了 rquuestAnimationFrame，这样可以让JS执行的时间
html5图片弹性布局,HTML5 使用弹性框布局实现可选择和压缩的网格
weixin_42499790的博客
06-09 287
JavaScript语言：JaveScriptBabelCoffeeScript确定var Grid = (function() {'use strict';var RAF = window.requestAnimationFrame;var throttle = (function() {var wait = false;return function(callback, limit) {if ...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 923
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 672
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 596
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
基于python+django+vue的旅游网站系统
最新发布
计算机学姐的博客
09-17 1737
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
React动画实战：从CSS3到JS模拟与rAF深入解析
- 实现方法主要有三种：CSS3动画、JavaScript模拟和rAF。 2. **CSS3动画** - CSS3动画利用`scale`、`transform`、`rotate`、`animation`和`transition`属性，提供高性能且易于使用的动画功能。 - 优点包括高效...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值