关键词:
节流:节流阀, 触发了, 就关闭阀门, 开了门, 才能执行下次
防抖: 延时器, 一段时间触发了, 就重开延时器
意义 :为了性能优化, 可以阻止事件的频繁触发
- 节流
- 是什么?
- 减少流量,将频繁触发的事件减少,并每隔一段时间执行。即,控制事件触发的频率
<立刻>执行某件事, 但是事件执行的过程中, 关闭<节流阀>, 只有当事件执行完, 才能执行第二次
- 怎么用?
function throttle(fn, delay){
let loading = true;
return () => {
if(loading) { //如果阀门已经打开,就继续往下
setTimeout(()=> {
fn.apply(this, arguments);//定时器结束后执行
loading = true;//执行完成后打开阀门
}, delay)
loading = false;//关闭阀门
}
}
}
// 刚开始loading为true,然后将validloading置为false,进入了定时器,在定时器的时间期限之后,才会将loading重置为true,loading为true之后,之后的点击才会生效
// 在定时器的时间期限内,loading还没有重置为true,会一直进入return,就实现了在N秒内多次点击只会执行一次的效果
- 使用场景:
(1) 点按钮loading请求, 发请求立刻发, 发的过程中, 不会发第二次
(2) 轮播图, 点击箭头, 开始滑动, 滑动的过程中, 关闭节流阀, 等动画结束, 才能执行第二次
(3) 下拉刷新, 上拉加载更多, 一旦请求了, loading状态, 关闭节流阀
(4) h5小游戏, 跑酷, 跳的时候, 关闭节流阀, 落地之后, 才能跳第二次
- 防抖是什么?
- 防抖就是防止抖动,避免事件的重复触发
<延迟>执行某件事, 会开个延时器, 等一会儿, 如果事件再次触发, 重开延时器,直到一段时间内, 都没有触发了, 才执行
- 怎么用?
function debounce(fn, delay){
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(()=> {
fn.apply(this, arguments);
}, delay)
}
}
- 使用场景:
(1) resize事件, 屏幕修改宽度高度, 会非常频繁的触发
一般需求是, 等用户修改完屏幕大小后, 做适配 => 延迟执行
(2) 输入框搜索提示, 实时每个字母都立刻做提示, 频繁触发了
一般需求是, 等用户一段时间没有输入新的内容, 做搜索提示 => 延迟执行