开发中使用throttle和debounce

码客说

发布于 2019-10-22 14:41:19

1.6K0

发布于 2019-10-22 14:41:19

文章被收录于专栏：码客码客

前言

不管是WEB还是Android或者是iOS开发中我们都会有这样的问题

按钮点击时连续点击只让第一次生效
搜索时文本不断变化导致调用多次接口

上面的两个问题解决后能大大提升用户体验解决它们就用到了throttle和debounce

WEB(JS)

Android(Java)

主要用到RxJava和RxAndroid

参见文章:Android 中 RxJava 的实际使用

iOS(OC/Swift)

MessageThrottle
Swift可以用RxSwift

如果项目中已经用到或者想用RxSwift的话就选择第二种方式如果项目不想引用太多东西或者项目用的OC 就选择第一种方式

ReactiveCocoa vs RxSwift? RxSwift虽然只支持iOS8之后的系统但是现在基本只需适配iOS8以后了所以不用担忧 RxSwift和RxJava以及RxJS 语法基本都相似这真的就是learn once, apply everywhere. 所以推荐使用RxSwift

MessageThrottle实例

在OC中使用

- (void)viewDidLoad {
    [super viewDidLoad];
 
    MTRule *rule = [[MTRule alloc] initWithTarget:self selector:@selector(buttonClick:) durationThreshold:5];
    rule.messageQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    //rule.mode = MTPerformModeFirstly;
    //rule.mode = MTPerformModeLast;
    rule.mode = MTPerformModeDebounce;
    [MTEngine.defaultEngine applyRule:rule];
}

- (IBAction)buttonClick:(UIButton *)sender {
    dispatch_async(dispatch_get_main_queue(), ^{
        self.label.text = [NSString stringWithFormat:@"点击生效的时间: %@", [self getDateTimeStr]];
    });
}

- (NSString *)getDateTimeStr{
    NSDate *date = [NSDate new];
    NSDateFormatter *df = [NSDateFormatter new];
    [df setDateFormat:@"yyyy-MM-dd HH:mm:ss"];
    df.timeZone = [NSTimeZone timeZoneForSecondsFromGMT:[NSTimeZone localTimeZone].secondsFromGMT];
    NSString *localDateString = [df stringFromDate:date];
    return localDateString;
}

如上例子中设置的间隔为5秒可设置的模式有三种

rule.mode = MTPerformModeFirstly;
rule.mode = MTPerformModeLast;
rule.mode = MTPerformModeDebounce;

MTPerformModeFirstly 如果连续点击按钮每5s的第一次生效
MTPerformModeLast 如果连续点击按钮每5s的最后一次生效
MTPerformModeDebounce 如果连续点击按钮则重置计时器停止点击后5s操作生效

在Swift中使用

self.usernameTextField.addTarget(self, action: #selector(updatePicImageView), for: UIControlEvents.editingChanged)
    
let rule = MTRule.init(target: self, selector: #selector(updatePicImageView), durationThreshold: 1.2);
rule.messageQueue = DispatchQueue.main;
rule.mode = .debounce;
MTEngine.default.apply(rule);

这个和下面用RxSwift的示例做了同样的事可以对比一下

RxSwift实例

根据用户输入的名字变化更新头像

_ = self.usernameTextField.rx.text.orEmpty
    .debounce(1.2, scheduler: MainScheduler.instance)
    .distinctUntilChanged()
    .observeOn(MainScheduler.instance)
    .subscribe(onNext: { (query) in
        self.updatePicImageView();
    })

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除

swift