js:防抖debounce与节流throttle的区别与意义(前端性能优化)
一、防抖debounce
1、定义:事件被触发后,等待一段时间(例如wait毫秒),如果这段时间内没有再次触发该事件,则执行函数;如果等待时间内再次触发了事件,则重新开始计时。
2、意义:适用于需要等待用户输入完全结束后再执行操作的场景,例如搜索框输入、窗口调整大小等。
3、作用:防止函数在短时间内被频繁调用,从而提高性能。
/**
1. 防抖 - 触发函数后n秒内不再触发
2. @param {Function} func 要执行的函数
3. @param {Number} wait 延迟时间,单位ms
4. @param {scope} scope 执行函数的作用域
5. 使用:let debounced = debounce(func, 1000, this)
*/
function debounce (func, wait, scope) {
wait || (wait = 250) // 如果未提供 wait 参数,则默认设置为 250 毫秒
let timeout, context, args // 声明变量 timeout, context, args
const later = function () { // 定义 later 函数,用于在延迟结束后执行传入的 func 函数
timeout = null // 清除 timeout 变量
func.apply(context, args) // 使用之前保存的 context 和 args 调用 func 函数
if (!timeout) context = args = null // 如果 timeout 为 null,则清除 context 和 args
}
return function () { // 返回一个新的函数,这个函数用于包装对 func 的调用
context = scope || this // 设置 context 为传入的 scope 或当前函数的 this 上下文
args = arguments // 保存传入的参数
clearTimeout(timeout) // 清除之前的 timeout,以确保之前的延迟调用被取消
timeout = setTimeout(later, wait) // 设置新的 timeout,并将 later 函数作为回调函数, 延迟 wait 毫秒后执行 later 函数
}
}
二、节流throttle
1、定义:事件在被触发后,无论事件触发频率有多高,都会在固定的时间间隔(例如wait毫秒)内执行一次函数。
2、意义:适用于需要在固定时间间隔内执行一次操作的场景,例如滚动事件、鼠标移动事件等。
3、作用:确保函数在一定时间内只执行一次,从而避免函数被频繁调用。
/**
6. 节流 - 触发函数后n秒内只执行一次
7. @param {Function} func 要执行的函数
8. @param {Number} wait 延迟时间,单位ms
9. @param {scope} scope 执行函数的作用域
10. 使用:let throttled = throttle(func, 1000, this)
*/
function throttle(func, wait, scope) {
wait || (wait = 250) // 如果未提供 wait 参数,则默认设置为 250 毫秒
let args, context, last, timeout // 声明变量 args, context, last, timeout
const later = function () { // 定义 later 函数,用于在延迟结束后执行传入的 func 函数
last = +new Date // 更新 last 为当前时间(时间戳)
timeout = null // 清除 timeout 变量
func.apply(context, args) // 使用之前保存的 context 和 args 调用 func 函数
if (!timeout) context = args = null // 如果 timeout 为 null,则清除 context 和 args
}
return function () { // 返回一个新的函数,这个函数用于包装对 func 的调用
context = scope || this // 设置 context 为传入的 scope 或当前函数的 this 上下文
var now = +new Date // 获取当前时间
args = arguments // 保存传入的参数
if (last && now < last + wait) { // 如果当前时间距离上次调用时间小于 wait,则清除之前的 timeout,并设置新的 timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
} else { // 如果当前时间距离上次调用时间大于等于 wait,则立即调用 func
last = now
func.apply(context, args)
}
}
}
三、两者区别
1、触发时机:
防抖:在事件触发等待一段时间,如果在这段时间内没有再次触发事件,则执行函数。
节流:在事件触发后,固定时间间隔内执行一次函数。
2、 适用场景:
防抖:适用于需要等待用户输入完全结束后再执行操作的场景,例如搜索框输入。
节流:适用于需要再固定时间间隔内执行一次操作的场景,例如滚动事件。
四、适用场景举例
1、【按钮】点击进行保存提交等操作:建议节流。
原因:用户烦躁一直点击按钮,那么我们只需要在固定时间间隔内执行一次函数,执行成功提示,用户可能就不点击了。如果是防抖,用户烦躁点击很多次,一直不执行,可能会更烦躁。
2、【输入框】一边输入就一边进行调用接口获取相关下拉码表:建议防抖。
原因:输入的动作是比较快的,一直触发输入操作,那么在用户输入进行思考或者等待的时间内,防抖进行执行函数,调用获取下拉码表的接口,这样就达到减少频繁调用接口的目的了。如果是节流,固定时间内执行函数会让用户有卡顿的效果,并且可能多次调用接口,占用性能。