• 技术文章 >头条

    面试准备:快速学习JS防抖与节流

    小妮浅浅小妮浅浅2021-08-30 20:56:02原创6020

    防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法。

    一、速识防抖:

    在这之前,比如我们先定义一个按钮,并绑定一个点击事件,执行要触发的事件:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <!-- 定义一个按钮 -->

    <input type="button" id="btn" value="按钮" />

      

    <script>

    // 获取标签

      var btn = document.getElementById("btn");

    // 绑定事件 

      btn.addEventListener("click", real);

    // 要触发的事件

      function real(e) {

        console.log("北极光之夜。");

        console.log(e);

      }

    </script>

    可以发现,一直点击会一直触发事件,如果这个事件为发送一个请求,那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求,返回的结果和只点击一次是一样的,大大加重服务器压力和影响性能。所以,我们引入防抖的概念,简单来说,防抖就是通过setTimeout 的方式,在一定的时间间隔内,将多次触发变成一次触发。

    二、速识节流:

    节流其实就很好理解了,减少一段时间的触发频率。简单来说,就是你一直狂点不停的话,它会每隔一定时间就执行一次。它与防抖区别就是,无论事件触发多么频繁,都可以保证在规定时间内可以执行一次执行函数。下面利用计算时间戳实现:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <input type="button" id="btn" value="按钮" />

     <script>

       var btn = document.getElementById("btn");

       // 点击后触发trigger()函数,第一个参数为真实要执行的函数,第二个参数为限制时间

       btn.addEventListener("click", trigger(real, 500));

      function trigger(fn, delay) {

        // 设置bef,为上一次执行时间,初始为0

         var bef = 0;

         return function () {

         // 获取当前时间戳

           var now = new Date().getTime();

           //如果当前时间减去上次时间大于限制时间时才执行

           if (now - bef > delay) {

            // 执行函数

             fn(...arguments);

             //执行后,上次时间赋值为这次执行时间

             bef = now;

           }

         };

       }

       //真实要执行函数

       function real(e) {

         console.log("北极光之夜。");

         console.log(e);

       }

     

    </script>

    以上就是JS防抖与节流的介绍,希望对大家有所帮助。更多js学习指路:js教程

    专题推荐:js 防抖 节流
    上一篇:IEEE Spectrum2021年度编程语言排行榜出炉 下一篇:Linux内核30周庆推出Linux 5.14

    相关文章推荐

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网