使用Lodash进行防抖节流

tech2022-09-05  90

下载引入Lodash $ npm i -g npm $ npm i --save lodash

一、防抖

使用方法: _.debounce(func, [wait=0], [options={}])

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

使用去抖技术,我们可以将多个连续的呼叫“分组”在一个呼叫中。

想象你在电梯里。门开始关闭,突然另一个人试图上车。电梯没有开始改变楼层的功能,门再次打开。现在,与另一个人再次发生。电梯正在延迟其功能(移动地板),但是正在优化其资源。

案例: // 避免窗口在变动时出现昂贵的计算开销。 jQuery(window).on('resize', _.debounce(calculateLayout, 150)); // 当点击时 `sendMail` 随后就被调用。 jQuery(element).on('click', _.debounce(sendMail, 300, { 'leading': true, 'trailing': false })); // 确保 `batchLog` 调用1次之后,1秒内会被触发。 var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); var source = new EventSource('/stream'); jQuery(source).on('message', debounced); // 取消一个 trailing 的防抖动调用 jQuery(window).on('popstate', debounced.cancel);

二、节流

使用方法: _.throttle(func, [wait=0], [options={}])

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

案例: // 避免在滚动时过分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken`,但5分钟内超过1次。 var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); jQuery(element).on('click', throttled); // 取消一个 trailing 的节流调用。 jQuery(window).on('popstate', throttled.cancel);

三、总结

1. 防抖动和节流是两种相似(但不同!)的技术,用于控制我们允许某个函数随时间执行多少次。

详见官方文档:防抖节流

最新回复(0)