概念：
本质上是优化高频率执行代码的一种手段
相同点:
- 都是为了应对事件持续频繁触发，不断发送请求，造成前端性能下降或对后端服务器造成的压力
不同点:
- 节流会不断触发，而防抖仅在最后一次触发
假设：都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行⼀次。防抖，则不管调动多少次⽅法，在2s后，只会执行⼀次
应用场景
防抖：
- 搜索框搜索输入。只需用户最后⼀次输入完，再发送请求
- 手机号、邮箱验证输入检测
节流：
- 窗口大小 resize 。只需窗口调整完成后，计算窗口大小。防止重复渲染。
- 滚动加载，加载更多或滚到底部监听
实现
可以利用时间戳或定时器的方式
防抖：定时器
节流：定时器或时间戳都可以
- 防抖：
定时器方式
let box=document.querySelector('.box')
let i=1;
box.innerHTML=i;
事件对象.addEventListener('事件类型',debounce(moveFn),false)
function moveFn() {
this.innerHTML=++i
}
//通过防抖实现优化
function debounce(fn,time=1000) {
let timer=null;
return function() {
let _this=this
let args=arguments
clearTimeout(timer)
timer=setTimeout(function() {
fn.apply(_this,args)
},time)
}
}
- 节流
1.定时器方式
let box=document.querySelector('.box')
let i=1;
box.innerHTML=i;
box.addEventListener('mousemove',throttle(moveFn,2000),false)
function moveFn(e) {
this.innerHTML=++i
}
//实现节流-定时器
function throttle(fn,time) {
let timer=null;
return function() {
let _this=this
let args=arguments
if(!timer) {
timer=setTimeout(function() {
timer=null
fn.apply(_this,args)
},time)
}
}
}
2.事件戳方式
let box=document.querySelector('.box')
let i=1;
box.innerHTML=i;
box.addEventListener('mousemove',throttle(moveFn,5000),false)
function moveFn(e) {
this.innerHTML=++i
}
//实现节流-时间戳版本
//思路：用现在时间减去上一次的时间>=time,就调用！
function throttle(fn,time=1000) {
//上一次的时间
let previus=0
return function() {
let _this=this;
let args=arguments
//生成当前时间
let now=+new Date()
if(now-previus>=time) {
fn.apply(_this,args)
previus=now
}
}
}
