关于lodash.debounce的配置

最近在改一个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 为 falsefunc调用将被推迟到下一个点,类似setTimeout0的超时。

我也有尝试过使用el-button的loading属性做防抖,但是只要手速够快,就不管用。

posted on 2024-02-18 14:42  胜者为王东恺  阅读(200)  评论(0编辑  收藏  举报

导航