最近在改一个bug的时候反馈说一个弹窗表单在快速多次的点击提交按钮时有可能重复提交,于是我在检查这个表单的时候发现他的防抖是这样配置的:
submit1: debounce(function() { console.log(1); this.cancel(true); },500),
乍一看好像没什么问题,于是我查询了文档 lodash.debounce | Lodash中文文档 | Lodash中文网 (lodashjs.com),发现这样配置只能实现延时调用不能防抖,根据文档描述还有一个options参数,修改后的配置:
submit2: debounce(function() { console.log(2); this.cancel(true); },500, {'leading': true,'trailing': false}),
文档原文:
创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait
毫秒后调用 func
方法。 debounced(防抖动)函数提供一个 cancel
方法取消延迟的函数调用以及 flush
方法立即调用。 可以提供一个 options(选项) 对象决定如何调用 func
方法,options.leading
与|或 options.trailing
决定延迟前后如何触发(注:是 先调用后等待 还是 先等待后调用)。 func
调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。 后续调用的 debounced(防抖动)函数返回是最后一次 func
调用的结果。
注意: 如果 leading
和 trailing
选项为 true
, 则 func
允许 trailing 方式调用的条件为: 在 wait
期间多次调用防抖方法。
如果 wait
为 0
并且 leading
为 false
, func
调用将被推迟到下一个点,类似setTimeout
为0
的超时。
我也有尝试过使用el-button的loading属性做防抖,但是只要手速够快,就不管用。
标签:调用,lodash,debounce,配置,debounced,func,leading,options From: https://www.cnblogs.com/wdk2020/p/18019297