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、【输入框】一边输入就一边进行调用接口获取相关下拉码表：建议防抖。
原因：输入的动作是比较快的，一直触发输入操作，那么在用户输入进行思考或者等待的时间内，防抖进行执行函数，调用获取下拉码表的接口，这样就达到减少频繁调用接口的目的了。如果是节流，固定时间内执行函数会让用户有卡顿的效果，并且可能多次调用接口，占用性能。

原文地址：https://blog.csdn.net/qq_43548684/article/details/140629211

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！