1 定义 —降低事件触发的频率
当一个事件持续触发时,我们期望降低事件触发的频率,事件处理函数还是会触发多次。比如在移动端手机浏览器对onscroll
事件不能实时触发,就是在内部做了节流处理。
2.使用场景
在连续触发事件的场景中,需要降低事件触发的频次,使用节流
。如上拉加载更多数据、图片懒加载(监听图片元素是否快到可视区域了)等
3.演示代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>节流1</title>
</head>
<body>
<button id="btn1">点击触发</button>
<script>
// PC端浏览器对onmousemove onscroll等事件的触发是非常密集,频次非常高。
// 移动端浏览器对onmousemove onscroll等事件的触发的频次给降低了,也就是内部执行节流处理
// 节流: 控制事件触发的频率. 在约定的时间内,虽然点击了按钮很多次,但是事件逻辑只触发一次
const btn1 = document.getElementById('btn1')
// btn1.addEventListener('click', handler, false)
// 节流后
btn1.addEventListener('click', throttle(handler, 1000), false)
function handler() {
console.log('按钮被点击了')
}
// 1秒内点击了10次,
// 每次点击时先查看是否已经有一个待执行,如果有,则当前的点击视为无效,如果没有则执行当前的点击对应的逻辑
/**
* 节流函数
*
* @Param fn function 被节流后 执行的函数
* @Param delay number 控制多少秒内只触发一次
*/
function throttle(fn, delay) {
let timer = null
// 知识的广度 只是 知识深度的一个附属品
// 每次点击都会执行这个函数
return function () {
// timer存在,说明当前时间段内,已经有一个fn函数待执行,就阻止当前的点击
if (timer){
//如果timer不存在 就执行下边的定时器函数 如果timer存在 就执行return,下边的定时器不再执行 直到定时器函数结束
return
}
// delay秒后执行fn函数
// 等于 delay秒内没有执行任何的函数逻辑,delay秒后立即执行了fn
// 等于 在delay秒内只执行了一次fn
timer = setTimeout(() => {
fn()
timer = null
}, delay)
}
}
// isEdit:
</script>
</body>
</html>