节流

玩过MOBA游戏的都知道对于射手来说攻速是一个非常重要的属性,但是其功速与各方面有关,单单与你手速无关,不是你按的越快,功速越块.节流的概念可以类比这一现象

 <div class="box"></div>
<script>
    let i = 1
    const box = document.querySelector('.box')
    //节流
    box.addEventListener('click',function(){
       box.innerHTML = ++i;
    })
    </script>

如js代码所示,页面中创建一个div鼠标在里面每次点击一次i的值就加1.等于说把射手的攻速与你的手速挂钩这样明显是非常不合理的.我们可以让其在一定时间内如果收到多个移动请求,但我只执行一次.比如1秒类我鼠标在div内点击了10次但我的i在这1秒内只执行一次i+1操作.思路明了,下面开始实现

<script>
    // 需求1: 点击box(鼠标移动触发频率更高)，就触发修改div内容的逻辑;
    let box = document.querySelector('.box');
    let i = 0;
    function setNum() {
      box.innerHTML = ++i;
    }

    // 1. 普通 - 绑定事件
    // box.addEventListener('click', setNum);

    // 2. 节流 - 自己封装实现
    box.addEventListener('click', throttle(setNum, 3000));

    // 封装一个方法  _.throttle(setNum, 3000)
    // 通过打印，验证返回值是一个函数
    // console.log(_.throttle(setNum, 3000)); 
    //   两个参数: 函数和时间;   一个返回值: 事件对应的函数;
    function throttle(fn, time) {
      // 上一次的触发时间，最好设置为返回值函数外部的变量, 下一次触发，也要用到上一次的值;
      let startTime = 0;
      return function () {
        // 逻辑 - 节流就是规定时间内触发第一次;
        //    如果间隔时间超过规定时间，就可以再次触发;
        // 获取当前时间 - 毫秒值
        let nowTime = Date.now();
        // 判断当前时间和上一次触发的时间差，是否大于传递过来的time
        if (nowTime - startTime > time) {
          // 如果大于传递过来的time，就要执行fn();
          fn();
          // 如果本次能够执行，那么上一次的时间就应该更新为本次时间;
          startTime = nowTime;
        }
      }
    }
  </script>

节流函数的应用场景:

1.鼠标事件；

2.游戏中抽奖以及其他一些设计

节流及其实现思路

节流