认识节流throttle函数
◼ 我们用一副图来理解一下节流的过程当事件触发时,会执行这个事件的响应函数;如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数;不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的;
节流的应用场景:➢ 监听页面的滚动事件;➢ 鼠标移动事件;➢ 用户频繁点击按钮操作;➢ 游戏中的一些设计;
案例:
<button class="btn">按钮</button> <script src="./js/underscore.js"></script><script>const btnEl = document.querySelector(".btn")let index = 1btnEl.onclick =_.throttle(function(){console.log(`第${index++}次执行`)},1000)
节流函数的应用场景
◼ 很多人都玩过类似于飞机大战的游戏
◼ 在飞机大战的游戏中,我们按下空格会发射一个子弹:很多飞机大战的游戏中会有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射;比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射;但是事件是触发了10次的,响应的函数只触发了一次;