_.debounce和_.throttle

参考:Lodash 英文文档   Lodash 中文文档

【下文摘自lodash官方文档】

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

在项目中实际使用得最多的例如_.debounce和_.throttle

image.png

创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 delayTime 毫秒后调用 func 方法。 debounced(防抖动)函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options(选项) 对象决定如何调用 func 方法,options.leading 与|或 options.trailing 决定延迟前后如何触发(注:是 先调用后等待 还是 先等待后调用)。 func 调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。 后续调用的 debounced(防抖动)函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 delayTime 期间多次调用防抖方法。

如果 delayTime 为 0 并且 leading 为 false, func调用将被推迟到下一个点,类似setTimeout为0的超时。

image.png创建一个节流函数,在 delayTime秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法, options.leading 与|或 options.trailing 决定 delayTime 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 delayTime 期间多次调用。

如果 delayTime 为 0 并且 leading 为 false, func调用将被推迟到下一个点,类似setTimeout为0的超时。


【注意】

Lodash debounce会返回一个function,必须调用从 debounce(......) 返回的函数才有效。

// 无效

const favoriteHandler = () => {

debounce(toggleFavorite, 500);

};

// 正确用法

const favoriteHandler = debounce(() => {

favorited.value = !favorited.value;

toggleFavorite();

}, 500);

随笔

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

被以下专题收入,发现更多相似内容