前言
JavaScript 中,防抖和节流是一种用于优化事件处理函数调用频率的技术。防抖和节流的目的都是为了避免频繁地触发事件处理函数,从而减少浏览器和服务器的负担。
防抖
防抖(Debounce)的原理是在事件被触发后,等待一定的时间间隔(比如500ms),如果在这个时间间隔内没有再次触发该事件,才会执行事件处理函数。如果在这个时间间隔内又触发了该事件,那么就重新等待新的时间间隔。
防抖主要是通过定时器来实现,如下:
javascript
function debounce(fun, time) {
let timer
return function () {
let that = this
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fun.call(that)
}, time)
}
}
以上代码中,fun 是事件处理程序,time 是事件执行的延迟时间,单位:毫秒。每一次触发事件时,会先判断一下 timer 的值是否赋值了定时器,如果赋值了,就直接清除定时器。然后在执行下面的代码。
节流
节流(Throttle)的原理是在事件被触发后,首先执行事件处理函数,然后设置一个时间间隔(比如500ms),在这个时间间隔内不再触发该事件。只有等待这个时间间隔过去后,才会重新触发事件,并再次执行事件处理函数。
节流的实现方式有两种:
- 使用定时器实现
javascript
function throttlea(fun, t) {
let timer = null
return function () {
let that = this
if (!timer) {
timer = setTimeout(function () {
fun.call(that)
timer = null
}, t)
}
}
}
以上代码中,触发事件后,会直接重新赋值 timer 为一个定时器,到时间后执行事件处理程序,重新赋值 timer 为 null,在这期间,因为 timer 的值是一个定时器,if 判断是不会执行的,必须重新赋值为 null 后才会重新执行。
- 时间戳的方式
javascript
function throttle(fun, time) {
let start = 0
return function () {
let that = this
let current = Date.now()
if (current - start >= time) {
fun.call(that)
start = current
}
}
}
以上代码中,触发事件后,定义开始触发事件的时间 start 为零,获取当前的时间戳赋值给 current,判断当前时间与初始时间是否超过间隔,如果超过了就把当前这个时间戳赋值给 start,然后执行事件处理程序。(因为初始时间为零,所以第一次触发会直接执行)
总结
- 防抖:适用于需要等待用户停止操作后再执行的场景,比如搜索框输入文本后请求接口。
- 节流:适用于需要限制函数执行频率的场景,比如滚动事件中的懒加载。