函数节流和函数防抖

时间:2021-7-21 作者:qvyue

最近编写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
     

// 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)
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。