温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS防抖与节流的示例分析

发布时间:2021-09-09 10:59:52 来源:亿速云 阅读:127 作者:小新 栏目:编程语言

这篇文章将为大家详细讲解有关JS防抖与节流的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、速识防抖:

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

<!-- 定义一个按钮 -->
<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 的方式,在一定的时间间隔内,将多次触发变成一次触发。

二、速识节流:

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

   <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防抖与节流的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI