1.防抖
1.1场景
- 有些事件是会频繁触发:keyup,scroll,resize,mousemove.
- 我们不想让它频繁触发:只需要在最后一次事件做操作即可。
- 比如:搜索框
- 实现步骤:在事件产生时,取消上一次的定时器,开启新的定时器。
2.节流
2.1场景
1.有些事件是会频繁触发:keyup,scroll,resize,mousemove.
2.我们依然不想让它怕频发触发,只不过不要那么频繁的触发而已
3.实现步骤:在事件产生时,判断节流阀,如果节流阀成立,立刻及将节流阀设置为不成立,做正常的代码执行顺序,开启新的定时器,定时器结束时重置节流阀。
3.节流和防抖的区别
防抖:一段时间内,只有最后一次产生效果。不在意过程。
节流:一段时间内可能产生多次效果,只不过每一次之间的频率降低了。在意过程。
4.代码演示
防抖
<body>
<button>点我试试</button>
<script>
var btn = document.querySelector('button')
var timer = null
btn.onclick = function () {
clearTimeout(timer)
timer = setTimeout(()=>{
console.log('发送请求了...')
}, 1000)
}
// 快速点击按钮, 你会发现, 无论你点的有多快, 只要点了一次, 日志就打印一次
// 需求: 在快速点击的过程中, 如何只让最后一次能产生效果
</script>
</body>
节流
<body>
<button>点我试试</button>
<script>
var btn = document.querySelector('button')
var flag = true
btn.onclick = function () {
if(flag) {
flag = false
console.log('发送请求...')
setTimeout(()=>{
flag = true
}, 1000)
}
}
// 快速点击按钮, 你会发现, 无论你点的有多快, 只要点了一次, 日志就打印一次
// 需求:在快速点击的过程中, 如何降低一下日志打印的频率, 比如1s内最多执行一回
</script>
</body>
防抖和节流的区别
防抖:事件处理在一段时间内执行一次
节流:事件处理在一段时间内出发多次,降低触发频率。