JS防抖与节流怎么实现

JS防抖与节流怎么实现

本篇内容主要讲解“JS防抖与节流怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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防抖与节流怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[