事件节流

2022-08-25 10:00:58 阅读：174 来源： 互联网

事件节流用于控制事件触发的最小间隔。

如一个事件 100 毫秒内只能触发一次。

如窗口缩放过程中对页面的元素大小重新调整，因为 resize 事件的触发是非常快的，用户虽然在频繁的变更窗口尺寸，但用户单位时间内能感知到的事情是有限的，也许一秒内执行100次尺寸计算和一秒钟内执行10次尺寸计算，感知上是没有太大区别的，而且事件内有太多的操作，又在频繁触发事件，这样很容易造成浏览器的卡顿。

<style>
  .outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:rgb(0, 0, 0); }
  .outer .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 100px; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; }
</style>

<div class="outer">
  <div class="text">100x200</div>
</div>

<script>
  var text = document.querySelector('.text');

  var resize = function() {
    var height = window.innerHeight;
    var width = window.innerWidth;

    text.innerText = width + 'x' + height;
  };

  window.addEventListener('resize', resize);

  resize();
</script>

可以看到，resize 事件的响应是非常快的，与之类似的还有 scroll 事件，即滚动条滚动时触发的事件。

这种情况下就可以使用节流的方式来优化事件。

<style>
  .outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:rgb(0, 0, 0); }
  .outer .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 100px; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; }
</style>

<div class="outer">
  <div class="text"></div>
</div>

<script>
  var text = document.querySelector('.text');
  var timer = false;

  var resize = function() {
    if (timer) return; // 判断是不是上一次事件执行完300毫秒内

    var height = window.innerHeight;
    var width = window.innerWidth;

    text.innerText = width + 'x' + height;

    timer = setTimeout(function () {
      timer = null;
    }, 300);
  };

  window.addEventListener('resize', resize);

  resize();
</script>

对例子做了一个简单的修改，增加了 timer 变量，用于存放定时器的标志值(定时器的返回值)，每当事件触发时，给 timer 赋值，这个时候事件就会处于一个锁住的状态，直到 300 毫秒后，timer 再次被设置为 null，表示可以触发事件。

根据需求，业务逻辑执行的时机是在定时器内还是定时器外可以自由调配。

标签：节流,text,50%,FF1177,事件,var,resize
来源： https://www.cnblogs.com/jinGang66/p/16623248.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

事件节流