# 函数防抖
import debounce from '@sadais/piui-tool/tools/debounce'
// or
this.$pi.debounce(func)
1
2
3
2
3
# debounce(func, [wait], [options]) ⇒ function
函数防抖
也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
创建一个 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的超时。
查看 David Corbacho's article (opens new window)
了解 debounce
and throttle
的区别。
Kind: global function
Returns: function
- 返回去抖之后的函数.
Category: Function
Since: 0.1.0
Param | Type | Default | Description |
---|---|---|---|
func | function | 需要去抖的函数. | |
[wait] | number | 0 | 延迟执行的时间. |
[options] | Object | {} | 选项对象. |
[options.leading] | boolean | false | 指定是否在超时前调用. |
[options.maxWait] | number | func延迟调用的最大时间. | |
[options.trailing] | boolean | true | 指定是否在超时后调用. |
Example
// Avoid costly calculations while the window size is in flux.
jQuery(window).on('resize', debounce(calculateLayout, 150))
// Invoke `sendMail` when clicked, debouncing subsequent calls.
jQuery(element).on('click', debounce(sendMail, 300, {
'leading': true,
'trailing': false
}))
// Ensure `batchLog` is invoked once after 1 second of debounced calls.
const debounced = debounce(batchLog, 250, { 'maxWait': 1000 })
const source = new EventSource('/stream')
jQuery(source).on('message', debounced)
// Cancel the trailing debounced invocation.
jQuery(window).on('popstate', debounced.cancel)
// Check for pending invocations.
const status = debounced.pending() ? "Pending..." : "Ready"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19