
JavaScript专题(三)防抖
一、为什么需要防抖
- 高频的函数操作可能产生不好的影响
- 如:resize、scroll、mousedown、mousemove、keyup、keydown……
为此,我们举个示例代码来了解事件如何频繁的触发:
我们写一个 index.html 文件:
从左边滑到右边就触发了近100次getUserAction 函数!看如下Gif:
因为这个例子很简单,所以浏览器完全反应的过来,但假设:
- 它的触发频次极高,1分钟2000次,且涉及到大量的位置计算、DOM 操作等工作,
- 存在接口请求,单个函数执行时间较长,但每个函数触发的间隔很近。
这种在一瞬间(短时间内)对浏览器或服务器造成了过多压力的交互就需要进行优化了,为了解决这个问题,一般有两种解决方案: - debounce 防抖
- throttle 节流
他们的目的都是:降低一个函数的触发频率,以提高性能或避免资源浪费。
二、防抖的原理
今天重点讲讲防抖的实现。
防抖的原理就是:你尽管触发事件,但是我一定在事件触发n秒无操作后才执行。举个例子:
我们规定3s为防抖的标准,那么:
- 第一次要求执行事件 - 此时倒计时3s
- 倒计时2s
- 倒计时1s
- 0.5s时事件再次被触发 - 此时倒计时3s
- …3s内无事发生
- 执行事件,共用了5.5s
三、自己实现一个防抖
3.1 第一版
我们根据上一节提到的核心思想,实现第一版代码:
如果我们要使用它,第一节的例子为例:
此时大家可以再次测试一下,事件持续发生时,只有在完全停止2s后,才会触发事件:
写到这里,作为针对部分高频事件的需求来说,已经结束了。我们来看看他的效果:
3.2 第二版
大家都知道,dom节点在触发事件的时候,this指向它本身,本例中则指向oDiv,但是在本例中:我们看一下
毕竟经过了一层匿名函数的包裹,this已经指向了window,为了减少影响,我们尝试修正它
第三版
解决的this指向问题,我们的函数仍然不够“完美”,JavaScript中,事件处理函数会提供event对象,我们简称为e。
为了保证它的原汁原味,我们再改第三版:
到此为止,我们在尽可能保留Dom事件原有能力的情况下,给函数加上了防抖效果,它可以解决大部分我们日常开发的防抖问题,但我们需要更“完美”
四、防抖进阶
4.1 立即执行
这个需求就是:
- 立即执行
- 保持n秒空白期
- 将n秒空白期置后
想想这个需求也是很有道理的嘛,那我们加个immediate参数判断是否是立刻执行。
再来看下此时他是什么效果:
4.2 添加简单验证
4.3 添加取消事件方法
如果你希望能取消被防抖的事件,我们可以这样写:
我们再来看看效果:
写到这里这个简单的防抖方法就算OK了,它确实还不算完美,如果在改进上有任何建议,不妨在评论区留言吧~
