可能80%的前端面试都遇到过这问题,也有无数人写了这方面的文章,但是我还想想写,不止是为了记录下,也是想表达下自己的想法
概念解释
首先说下节流防抖的概念问题吧
- 节流:说白了就是自定义一个时间间隔,让这个方法每隔这个时间就执行一次,其他触发这个方法的均无视。最常见的像scroll这种操作,没必要执行频率那么高,十分影响性能,搞个几百毫秒执行一次就够意思的了,当然具体执行时间间隔还得视业务需求而定
- 防抖:说白了就是你还在操作我就不执行它,等你停下来我才执行。还是拿滚动scroll来说事,你监听了文档的scroll,但希望在滚动过程中不执行定义的方法,等停下来才执行,那就是典型的防抖
在开始之前,给大家介绍下setTimeout
的返回值,
返回值timeoutID是一个正整数
,表示定时器的编号。这个值可以传递给clearTimeout()
来取消该定时器。需要注意的是setTimeout()
和setInterval(``)共用一个编号池,技术上,
clearTimeout()和
clearInterval()`` 可以互换。但是,为了避免混淆,不要混用取消定时函数
下面详细来说下
节流
一般来说节流有一下实现方式:
- 第一种利用闭包,最终返回个函数,先定义一个时间时间标志位
previous
, 这个值为每次执行完后的时间(首次执行previous
为执行时时间),当前时间
与previous
的差值若大于定义的间隔时间则执行,否则直接return掉
看下具体代码
常规版
function throttle(fn, wait=200) {
const self = this //暂存this,避免在返回函数里丢掉
let previous = Date.now() //存进来时候的时间
return function() { //返回新函数,这个函数内部持有对throttle函数作用域的引用,即可取到变量self以及previous的值
let now = Date.now() //取当前时间
if(now - previous > wait) { //当当前时间与previous时间差大于自定义间隔值,则执行
previous = now
fn.apply(self, Array.prototype.slice.call(arguments)) //执行,传入参数,注意arguments是伪数组,所以要转化为真数组
}else{
return
}
}
}
但有这样一个状况,就是在触发情况下,第一次执行发生在等待设定的时间后。如果我想第一次触发就执行,后面的间隔设定的时间再执行,这要怎么做呢?其实也好办,只需要把一开始开始的previous设为0,我每次判断它是否为0,为0的话就立即执行,这不就妥了吗
代码如下:
先行执行版
function throttle(fn, wait=200) {
const self = this
let previous = 0 // 一开始设为0
return function() {
const args = Array.prototype.slice.call(arguments)
if(!previous) {
fn.apply(self, args) //previous为0则立即执行
previous = Date.now() //把当前时间赋给previous,因为把当前时间赋给previous记录的总是上一次的执行时间,一开始为0除外
return
}
let now = Date.now() //取当前时间
if(now - previous > wait) {
previous = now
fn.apply(self, args)
}else{
return
}
}
}
- 第二种是利用setTimeout, 设置个timer存计时器id, 一开始timer为undefined, 以及每次执行前都把timer置为null, 以达到每次触发时判断当前有没有待执行的回调,没有才继续执行
看下代码
利用setTimeout常规版
function throttle(fn, wait=200) {
const self = this //暂存this,避免在返回函数里丢掉
let timer //暂存定时器ID
return function() {
const args = Array.prototype.slice.call(arguments) //参数
if(!timer) { //若当前没有待执行的定时器回调
timer = setTimeout(function() {
timer = null //这步尤为重要,执行了回调,就把timer置空,证明当前没有待执行的定时器回调了
fn.apply(self, args) //主函数执行
}, wait)
}
}
}
同常规版同理,若想第一次触发就执行,只需判断
function throttle(fn, wait=200) {
...
if(!timer) {
fn.apply(self, args) //只需要加这句
timer = setTimeout(function() {
...
}
}
防抖
如果理解了节流,防抖也是比较容易理解的。简单来说就是如果在归档的时间间隔内执行函数,会重新触发计时。
普通版
function debounce(fun, delay) {
let timer;
return function (args) {
let self = this
if(timer) { //存在定时器,则清掉
clearTimeout(timer)
}
timer = setTimeout(function () {
fun.apply(self, Array.prototype.slice.call(arguments))
}, delay)
}
}
同样的,以上代码同样存在这样一种情况,就是只有连续触发,停止触发后等待设定的时间后回调才会执行。如果我想第一次触发就执行,后面连续触发都不执行,停止后等待待设定的时间后回调才会执行。
其实我只需要在一开始加个是否存在定时器id便可判断这是否为第一次触发。
先触发版
如下:
function debounce(fun, delay) {
let timer;
let self = this
return function (args) {
const args = Array.prototype.slice.call(arguments)
!timer && fun.apply(self, args) //重点是这句,
if(timer) { //存在定时器,则清掉
clearTimeout(timer)
}
timer = setTimeout(function () {
fun.apply(self,args)
}, delay)
}
}
以上的代码大家都可以copy下面的去验证下,记得测试throttle要换下下面对应的函数名
function con() {
console.log(222)
}
document.addEventListener('scroll', debounce(con, 200))
总结
可能代码放得有点多,但大家只要记住节流跟防抖的目的,实现的方式有多种,也可以继续扩展,例如配置第一次触发是否立即执行,最后一次触发是否一定执行,也可配置取消节流跟防抖的监听。方法多种多样,把基本的弄懂,其他怎么搞还不是易如反掌,对吧聪明的小伙伴们