节流throttle函数

认识节流throttle函数

◼ 我们用一副图来理解一下节流的过程
    当事件触发时，会执行这个事件的响应函数；
    如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
    不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；
节流的应用场景：
    ➢ 监听页面的滚动事件；
    ➢ 鼠标移动事件；
    ➢ 用户频繁点击按钮操作；
    ➢ 游戏中的一些设计；

案例:

    <button class="btn">按钮</button>  
  <script src="./js/underscore.js"></script>
  <script>
    const btnEl = document.querySelector(".btn")
    let index = 1
    btnEl.onclick =_.throttle(function(){
      console.log(`第${index++}次执行`)
    },1000)

节流函数的应用场景

◼ 很多人都玩过类似于飞机大战的游戏
◼ 在飞机大战的游戏中，我们按下空格会发射一个子弹：
  很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
  比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
  但是事件是触发了10次的，响应的函数只触发了一次；