最近编写vue前端项目时，了解了新的专业名词：函数防抖、函数节流；虽是第一次知道这个词，但平常开发中其实早已接触使用过了；
防抖与节流是处理频繁事件的技术：用以限制事件频繁地发生可能造成的问题，如：
- 多次执行同一事件，造成事件叠加带来不必要的影响（iOS典型的例子是点击按钮Push到其他vc时会连续跳转多次）
- 频繁渲染界面等带来的性能问题
- 频繁调用接口请求数据带来的流量压力
节流（throttle）
节流是指高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率；
应用场景：
频繁点击按钮只响应一次事件
防抖（debounce）
防抖是指触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间;
应用场景：
输入框输入文字时实时搜索功能
节流和防抖的区别
简单来说节流是控制频率，防抖是控制次数
单从字面理解的话，防抖节流容易搞混且不太好理解；下面引用一张图说明：
以上图基础 举个例子：
Button点击事件有可能存在极短时间内，频繁的点击了多次的情况；针对这种情况分别做节流和防抖处理interval设置为1000ms，实际的效果如下：
- 函数节流
在1000ms内连续点击了3次，button响应事件a、x、y；最终只会立即执行a，丢弃x、y；如果在m ms内连续点击了n 次，最终会执行时间 m/1000 + 1 个事件；即不管有多少事件interval计算是固定的； - 函数防抖
在1000ms内连续点击了2次b、c；最终会已最后一次点击c为准重新计时，当时间达到interval才执行c；而前面的b会丢弃；如果在m ms内连续点击了n 次，且每每2个点击间隔都没有超过1000ms最终只会在n点击1000ms后执行第n个事件（只有一个事件）；即interval计算是动态的，每次都会以最后一个重新计时；
代码实现
前端实现
//
export default {
// 防抖
debounce: function (fn, interval) {
// 时间间隔ms
var interval = interval || 200;
var timer;
// 闭包
return function () {
// 考虑作用域，上下文环境，apply需要用到this对象
var self = this;
// 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
var args = arguments;
// 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
// 执行方法
fn.apply(self, args);
}, interval);
};
},
// 节流
throttle: function (func, interval) {
var timer = null
var startTime = 0
return function () {
// 结束时间
var curTime = Date.now()
// 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）
var seconds = curTime - startTime
var self = this
var args = arguments
clearTimeout(timer)
if (seconds > interval) {
// 证明可以触发了
func.apply(self, args)
// 重新计算开始时间
startTime = Date.now()
}
}
}
}
使用，以实时搜索为例：
// html
<van-search
v-model="searchValue"
placeholder="输入姓名查询"
@input="onInput"
/>
// js
methods: {
onInput: debounceThrottleTool.debounce(function() {
this.queryUsers()
}, 800)
}
iOS实现
知道了思路后，其实不同语言实现起来都不难了；iOS这边可以直接使用dispatch实现（当然也有其他方式）
@implementation MMThrottler
- (instancetype)init {
self = [super init];
if (self) {
_interval = .2;
_queue = dispatch_get_main_queue();
_previousDate = NSDate.distantPast;
_semaphore = dispatch_semaphore_create(1);
}
return self;
}
- (void)execute:(void(^)())action {
__weak typeof(self) selfWeak = self;
dispatch_semaphore_wait(_semaphore, DISPATCH_TIME_FOREVER);
if (_blockItem) {
// 取消上一次事件
dispatch_block_cancel(_blockItem);
}
_blockItem = dispatch_block_create(DISPATCH_BLOCK_BARRIER, ^{
selfWeak.previousDate = NSDate.date;
action();
});
NSTimeInterval seconds = [NSDate.date timeIntervalSinceDate:_previousDate];
NSTimeInterval delaySeconds = seconds > _interval ? 0 : _interval;
if (seconds > _interval) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delaySeconds * NSEC_PER_SEC)), _queue, _blockItem);
}
dispatch_semaphore_signal(_semaphore);
}
@end
@implementation MMDebouncer
- (instancetype)init {
self = [super init];
if (self) {
_interval = .5;
_queue = dispatch_get_main_queue();
_semaphore = dispatch_semaphore_create(1);
}
return self;
}
- (void)execute:(void(^)())action {
dispatch_semaphore_wait(_semaphore, DISPATCH_TIME_FOREVER);
if (_blockItem) {
// 取消上一次事件
dispatch_block_cancel(_blockItem);
}
_blockItem = dispatch_block_create(DISPATCH_BLOCK_BARRIER, ^{
action();
});
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(_interval * NSEC_PER_SEC)), _queue, _blockItem);
dispatch_semaphore_signal(_semaphore);
}
@end
使用，以实时搜索为例
#pragma mark - UITextFieldDelegate -
- (void)searchTextDidChange {
WeakObj(self)
[self.debouncer execute:^{
[selfWeak queryUsers];
}];
}
响应式框架
如果项目使用了响应式框架，这些框架一般都封装了函数节流、函数防抖功能；
RxSwift可以很简单的使用节流和防抖：
textfield.rx.text.orEmpty.changed
.debounce(0.3, scheduler: MainScheduler.instance)
.asObservable()
.subscribe(onNext: { [weak self] response in
}).disposed(by: rx.disposeBag)
textfield.rx.text.orEmpty.changed
.throttle(0.3, scheduler: MainScheduler.instance)
.asObservable()
.subscribe(onNext: { [weak self] response in
}).disposed(by: rx.disposeBag)
网友评论