背景
我们在开发的过程中会经常使用如scroll、resize、touchmove等事件,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。
因此针对这类事件要进行节流或者防抖处理
节流
节流的意思是,在规定的时间内只会触发一次函数,如我们设置函数500ms
触发一次,之后你无论你触发了多少次函数,在这个时间内也只会有一次执行效果
先来看一个例子
See the Pen gKWLpO by wclimb (@wclimb) on CodePen.
我们看到使用了节流的在1000ms
内只触发了一次,而没有使用节流的则频繁触发了调用的函数
接下来看看代码实现
v1 第一次不触发,不传参实现1
2
3
4
5
6
7
8
9
10
11
12
13function throttle(fn,interval){
var timer;
return function(){
if(timer){
return
}
timer = setTimeout(() => {
clearTimeout(timer)
timer = null
fn()
}, interval || 1000);
}
}
效果是实现了,但是我在尝试在执行函数里console.log(this)
,结果发现this
指向的是window
,而且还发现我们不能传递参数,下面就来改进一下