事件频繁触发可能造成的问题
- 一些浏览器事件：window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题
- 如果向后台发送请求，频繁触发，对浏览器造成不必要的压力
如何限制事件处理函数频繁调用
- 函数节流
- 函数防抖
函数节流（throttle）
理解
- 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
- 适合多次事件按时间做平均分配触发
使用场景
- 窗口调整（resize）
- 页面滚动（scroll）
- DOM 元素的拖拽功能实现（mousemove）
- 抢购疯狂点击（click）
// 用来返回节流函数的工具函数
function throttle (callback, delay) {
let pre = 0
return function(event) { // 节流函数/真正的事件回调函数
const current = Date.now()
if (current - pre > delay) {
callback.call(this, event) // 调用真正的事件处理函数
pre = current
}
}
}
函数防抖(debounce)
理解:
- 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
- 适合多次事件一次响应的情况
使用场景：
// 用来返回防抖函数的工具函数
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>
function handleClick(event) {
console.log('处理点击事件', this, event)
}
document.getElementById('throttle').onclick = throttle(handleClick,2000)
document.getElementById('debounce').onclick = debounce(handleClick,2000)
</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 src="./lodash.js"></script>
<script>
// 用来返回节流函数的工具函数
function throttle(callback, delay) {
let pre = 0
return function (event) { // 节流函数/真正的事件回调函数 this 是发生事件的标签
const current = Date.now()
if (current-pre>delay) { // 只有离上一次调用callback的时间大于delay
callback.call(this, event) // 调用真正处理事件的回调函数
pre = current
}
}
}
// 用来返回防抖函数的工具函数
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>
<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>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
- 找不到素材资源介绍文章里的示例图片？
- 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
- 模板不会安装或需要功能定制以及二次开发？
- 请QQ联系我们
发表评论
还没有评论，快来抢沙发吧！