一、防抖
- 定义:防抖就是指触发事件后等待 n 秒后再执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。简单来说就是将多次执行变成最后一次执行。
- 实现思路:每次触发事件时都取消之前的延时调用方法,然后新建一个延时调用方法。
- demo如下:
<input type="text">
<script>
let inp=document.querySelector("input");
let timeout=null;
inp.oninput=function(){
if(timeout!=null){
clearTimeout(timeout)
}
timeout=setTimeout(()=>{
console.log(this.value)
},500)
}
</script>
二、节流
- 定义:节流就是指连续触发事件但是在 n 秒中只执行一次函数,从而稀释函数的执行频率。简单来说就是将多次执行变成每隔一段时间执行。
- 实现思路:每次触发事件时都判断当前是否有等待执行的延时函数。如果有,就不执行函数,如果没有,就执行函数。
- demo如下:
<style>
body{
height: 3000px;
}
</style>
<script>
let flag=true;
window.onscroll=function(){
if(flag){
setTimeout(()=>{
console.log("节流");
flag=true;
},5000)
}
flag=false;
}
</script>
三、两者共同点和不同点
- 两者共同点:都可以减少函数的执行次数。
- 两者区别:
- 目的不同:防抖是将多次执行变为最后一次执行。节流是将多次执行变成每隔一段时间执行。
- 实现思路不同:防抖是每次触发事件时都取消之前的延时调用方法。节流是每次触发事件时都判断当前是否有等待执行的延时函数。
- 使用场景不同:
- 防抖
场景1: 比如监听input输入事件,输入的过程不想请求接口,输入完成后再请求查询接口。 - 节流
场景1:比如一个页面内容太多需要使用懒加载的时候,就可以使用节流。因为懒加载需要监听计算滚动条的位置,但不是每次滑动都需要触发,可以使用节流降低计算的频率。
场景2:鼠标连续不断地触发某事件(如点击),在单位时间内只触发一次。比如类似于秒杀的这种活动,用户可能会连续不断的点击按钮,这个时候可以使用节流,在单位时间内只请求一次接口。