目录
b站思学堂总结:
防抖:操作时不执行,确定不操作了才执行;类似于手机息屏;节流:到时间了必须执行一次;类似于流水大巴,一小时一趟。
防抖就是每次操作都会先清除定时器,并开启定时器,一直操作就会一直清除定时器,使定时器没有办法运行完成,只有不操作了才会不清除定时器使得定时器运行完成;
节流:
摘抄:
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。
滚动条监听的例子:
回想一个常见的功能:监听浏览器滚动事件,返回当前滚条与顶部的距离
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = showTop
这个函数的默认执行频率很高,点击选中一个页面的滚动条,然后点击一次键盘的【向下方向键】,会发现函数执行了8-9次!实际上我们并不需要如此高频的反馈,毕竟浏览器的性能是有限的,不应该浪费在这里,所以需要优化。
防抖(debounce):
基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:
- 如果在200ms内没有再次触发滚动事件,那么就执行函数
- 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
效果:如果短时间内大量触发同一事件,只会执行一次函数。
实现:既然前面都提到了计时,那实现的关键就在于setTimeout这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
//if(timer)是if(timer!=null)
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
// 然后是旧代码
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值,实际使用根据需要来配置
到这里,已经把防抖实现了,现在给出定义:
- 对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。
节流(throttle):
使用上面的防抖方案来处理问题的结果是:
- 如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。
但是如果产品的期望处理方案是:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈呢?
效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
实现 :借助setTimeout
来做一个简单的实现,加上一个状态位valid
来表示当前函数是否处于工作状态:
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
运行以上代码的结果是:
- 如果一直拖着滚动条进行滚动,那么会以1s的时间间隔,持续输出当前位置和顶部的距离
应用场景:
- 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
- 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)
关联:
闭包的this指向:
<!-- 输出user的值 -->
<!-- <script>
let tm ={
user:"提莫",
get:function(){
return function(){
console.log(this);
//这个里面this指向window window.user当然找不到值
return this.user;
}
}
}
let a = tm.get();//a就是给这个对象起的名字
console.log(a());//undefined(其实是window.a)
</script> -->
<!-- <script>
let tm ={
user:"提莫",
get:function(){
// console.log(this);//这个里面this指tm对象 tm.user就能找到值
let qthis=this;
return function(){
return qthis.user;
}
}
}
let a = tm.get();
console.log(a());//提莫
</script> -->
<script>
let tm ={
user:"提莫",
get:function(){
// console.log(this);//this指向tm对象(我们之前学过箭头函数的this指向是由这个匿名函数上下文决定的)
return () =>{
return this.user;
}
}
}
let a = tm.get();
console.log(a());//提莫
</script>