在进行窗口的操作或者输入框操作时,如果事件处理函数用的频率无限制,会加重浏览器和服务器的负担,此时我们就可以用防抖(debounce)和节流(throttle)的方式来减少调用频率,同时又不影响实际效果。
1.函数防抖
单位时间内,频繁触发一个事件,以最后一次触发为准。
防抖的实现:
- 声明一个全局变量存储定时器ID。
- 每一次触发交互的时候,先清除上一次的定时器,然后开启本次定时器。
<input type="text" name="" id="inp">
<script>
//输入框事件
//声明全局变量存储定时器ID
var timeID = null
// 获取输入框节点
var inp = document.getElementById('inp')
// 输入框输入事件
inp.oninput = function () {
//1.先清除之前的定时器
clearTimeout(timeID)
//2.开启本次定时器
timeID = setTimeout(() => {
console.log(`输入的内容是${this.value}`)
}, 500)
}
</script>
函数节流
单位时间内,频繁触发一个事件,只会触发一次。
节流的实现:
- 声明一个全局变量存储触发事件。
- 每一次触发事件,获取当前时间。
- 判断当前时间与上一次触发事件,是否超过了间隔。
- 如果超过间隔时间,则执行事件处理代码,然后存储本次触发的时间。
<button id="btn">点我呀</button>
<script>
//声明一个全局变量存储触发时间
let lastTime = null
// 获取按钮节点
var btn = document.getElementById('btn')
//页面滚动事件
btn.onclick = function () {
//1.每一次触发 先获取本次时间戳
let currentTime = Date.now()
//2.判断当前时间 与 上次触发时间 是否超过间隔
if (currentTime - lastTime >= 3000) {
console.log(this.innerHTML)
//3.存储本次的触发时间
lastTime = currentTime
}
}
</script>