1.什么是防抖和节流?
- 防抖:从字面意思理解就是防止抖动,众所周知,在抖动的情况下容易发生高频触发。为了避免这种情况,防抖的核心就是<延迟执行>,当间隔时间大于规定时间,才会触发执行方法。适用场景:实时搜索、拖拽。
- 节流:字面翻译–>节省流量。节流是指若在规定的间隔时间内仍频繁重复操作,请求方法并不会重新发送,直到中间间隔时间大于规定的间隔时间,才会重新触发请求。适用场景:抢购疯狂点击。
2.防抖和节流的共同点和区别?
- 共同点:
- 防抖和节流均是为了防止频繁触发、消耗过多资源而提出的解决方法。
- 防抖和节流的核心思想,均是设定一个规定的空隙时间,只有等待时间超过空隙时间才会请求数据。
- 防抖和节流的实现均要利用闭包,保护局部变量。
- 区别:
- 防抖是延迟执行,等待时间超过规定时间才会执行。
- 节流是立即执行,中间等待时间超过规定时间才会再次执行。
3.实例
处理防抖和节流的方式多种多样,以下两种方法只是为了便于理解
1.防抖
思路:第一次点击后会立即执行一次请求,然后疯狂连续点击按钮,每次点击都会促使定时器重新计时,只有停止点击等待定时器执行完毕后才能触发下一次请求,相对于初始化一次函数
// html
<button id="btn">click me</button>
// js
// 假定这是一个请求数据的方法
function req(){
console.log('发送请求~')
}
// 点击事件要执行的函数
function fn(){
let timeout;
return function(){
if(timeout){
clearTimeout(timeout)
} else {
req() // 调用数据请求
}
timeout = setTimeout(function(){
timeout = null
},2000)
}
}
// 你要愿意上面代码简写成如下也行
// function fn(){
// let timeout;
// return function(){
// timeout ? clearTimeout(timeout) : req()
// timeout = setTimeout(() => timeout = null,2000)
// }
// }
//绑定事件
document.getElementById('btn').onclick = fn()
2.节流
思路:点击后不会立即执行,到规定时间后(倒计时完毕)才会执行,然后每次点击,都只会在规定的时间内执行一次,因为每次倒计时完成才会将timeout重置为null,然后再次进入该判断内语句,当timeout有值时候不会进行任何处理
function fn(){
let timeout;
return function(){
if(!timeout){
timeout = setTimeout(function(){
timeout = null
req()
},2000)
}
}
}