# 函数节流
import throttle from '@sadais/piui-tool/tools/throttle'
// or
this.$pi.throttle(fn, delay)
1
2
3
2
3
# throttle(func, [wait], [options]) ⇒ function
函数节流
如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。
也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。
创建一个节流函数,在 wait 秒内最多执行 func 一次的函数。
该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
options.leading(先调用后等待) 和 options.trailing(先等待后调用) 决定延迟前后如何触发。
func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。
注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。
如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点,类似setTimeout为0的超时。
查看 David Corbacho's article (opens new window)
了解 throttle
and debounce
的区别
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 excessively updating the position while scrolling.
jQuery(window).on('scroll', throttle(updatePosition, 100))
// Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
const throttled = throttle(renewToken, 300000, { 'trailing': false })
jQuery(element).on('click', throttled)
// Cancel the trailing throttled invocation.
jQuery(window).on('popstate', throttled.cancel)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9