事件频繁触发可能造成的问题?
1). 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题。
2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
如何限制事件处理函数频繁调用
- 函数节流
- 函数防抖
函数节流（throttle）
理解
在函数需要频繁触发时：函数执行一次后，只有大于设定的执行周期（自定义延迟时间）后才会执行第二次。
适合多次事件按时间做平均分配触发
场景
- 窗口调整（resize）
- 页面滚动（scroll）
- DOM元素的拖拽功能的实现（mousemove）
- 抢购疯狂点击（click）
<script>
// 用来返回节流函数的工具函数
function throttle(callback, delay) {
let pre = 0
return function (event) { // 节流函数/真正的事件回调函数 this 是发生事件的button
const current = Date.now()
if (current - pre > delay) { // 只有离上一次调用callback的时间大于delay
callback.call(this, event) // 调用真正的处理事件的回调函数
pre = current
}
}
}
</script>
函数防抖(debounce)
理解
在函数需要频繁触发时：在规定时间内，只让最后一次生效，前面不生效 适合多次事件一次响应的情况
场景
- 输入框实时搜索（keyup/input）
<script>
// 用来返回防抖函数的工具函数
function debounce (callback, delay) {
return function(event) {
// 如果上一次事件还没有真正处理，取消掉
if (callback.hasOwnProperty('timeID')) {
clearTimeout(callback.timeID)
}
// 启动定时器
callback.timeID = setTimeout(() => {
callback.call(this, event) // 正在处理
// 标记事件已经真正处理 删除标记
delete callback.timeID
}, delay)
}
}
</script>
在页面中调用函数进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="throttle">函数节流</button>
<button id="debounce">函数防抖</button>
<script>
function handleClick(event) {
console.log('处理点击事件', this, event)
}
document.getElementById('throttle').onclick = throttle(handleClick,2000)
document.getElementById('debounce').onclick = debounce(handleClick,2000)
</script>
</body>
</html>
