防抖
什么是防抖:单位时间内,频繁触发一个事件, 以'最后一次'触发为准
防抖应用场景: 输入框输入事件
防抖流程 :
声明一个全局变量存储定时器ID
每一次触发交互的时候,先清除上一次定时器。 然后把本次事件处理代码放入定时器中
<script> let timeID = null //输入框输入事件 document.querySelector('input').oninput = function () { console.log(发送ajax,搜索内容是${this.value}) } </script>
开启防抖之后
节流
什么是节流 : 单位时间内,频繁触发一个事件, 只会触发一次
节流场景 : 解决高频事件 (滚动条事件高频触发)
节流实现:
声明一个全局变量存储触发时间 let lastTime = null
每一次触发事件,获取当前时间 let currentTime = Date.now()
判断 当前时间 与 上一次触发时间,是否超过间隔 currentTime-lastTime>=500
如果超过触发间隔,则执行事件处理代码。 然后存储本次触发事件 lastTime = currentTime
开启节流之后