一,防抖,
- 原理:在事件触发后,设置一个定时器,如果在设定的时间间隔内事件再次触发,就会取消之前的定时器并重新设置一个新的定时器。只有当在设定的时间间隔内没有事件触发时,定时器触发时才会执行事件处理函数。
- 应用场景:
- 搜索框实时搜索:避免频繁触发搜索请求,只在用户停止输入一段时间后发送请求。
- 窗口大小调整:确保在用户完成调整后进行布局计算,提高性能。
<body>
<input type="text" id="inp">
<script>
//封装防抖函数
function fangdo(fn,time) {
let timeout=null;
return function () {
clearTimeout(timeout)
timeout=setTimeout(()=>{
fn()
},time)
}
}
//获取input元素
var inp=document.getElementById('inp');
function sayHi() {
console.log('防抖');
}
//给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件
inp.addEventListener('input',fangdo(sayHi,5000))
</script>
</body>
二,节流,
- 原理:在一定时间内,无论事件触发多少次,只会执行一次事件处理函数。通过记录上次事件处理函数的执行时间戳,在事件触发时与当前时间戳进行比较,如果时间间隔超过设定的阈值,就执行事件处理函数。
- 应用场景:
- 页面滚动加载:控制数据的加载速度,提升用户体验。
- 按钮防重复点击:防止多次点击造成误操作。
<script>
//封装节流函数
function jieliu(fn,time) {
//闭包保存一个‘节流阀’
let temp= false;
return function(){
if (temp) {
return
}else {
temp=true;
setTimeout(() => {
fn.apply(this,arguments);
temp=false;
}, time);
}
}
}
function sayHi(e){
//打印document的宽高
console.log(e.target.innerHeight,e.target.innerWidth);
}
//绑定事件 调用节流函数
window.addEventListener('resize',jieliu(sayHi,2000))
</script>
节流(throttle
)和防抖(debounce
)是两种常用的浏览器事件处理方法。
防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯,只要有一个人进来,就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
节流:控制流量,单位时间内事件只能触发一次,与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯,每等一个红灯时间就可以过一批。
相同点:
1,都是为了减少事件触发频率,优化性能。
不同点:
1,节流是指在一段时间内最多触发一次事件,节流算法会在特定的时间间隔内判断是否触发事件;
2,防抖是指在一段时间内只要有事件触发,就重新计算时间,直到这段时间内没有事件触发,才真正的执行事件;
3,节流适用于持续的触发,防抖适用于短时间内的大量触发。
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_36362721/article/details/128927798