MJRefresh中异步更改UI为Refreshing状态导致内部状态和UI状态不一致的问题

1.前言

项目使用MJRefresh作为下拉刷新控件。在手动触发下拉刷新时候遇到了一个bug,看了一下MJRefresh的源码,发现MJRefresh的实现有点瑕疵,总结在此。

2.问题描述

如果我们这样使用MJRefresh,最后MJRefresh Header将会保持下拉刷新的状态,而不能恢复到Idle的状态。

    MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        @strongify(self);
        [[self.viewModel reloadData] subscribeNext:^(id x) {
            @strongify(self);
            [self endRefreshing];
        } error:^(NSError *error) {
            @strongify(self);
            [self endRefreshing];
        }];
    }];
    self.tableView.mj_header = header;
    ...
    [self.tableView.mj_header endRefreshing];
    [self.tableView.mj_header beginRefreshing];

以上代码中调用beginRefreshing是为了触发下拉刷新。调用endRefreshing是不必要的,但是这条语句会导致MJRefresh表现不正确(即不能恢复到Idle状态),作为组件应该更加健壮一些,说明MJRefresh实现上有些瑕疵。下面具体分析一下。

3.问题原因

问题核心原因是:
在MJRefreshHeader类setState方法中“更改UI为refreshing状态”的操作是异步的。也就是说,设置Refreshing状态时,设置内部状态和设置UI状态被分离开了,如果在中间插入了设置内部状态(比如Idle)的操作可能会导致内部状态和UI状态不一致的问题。另外,MJRefreshendRefreshing方法中“设置状态为Idle”操作是异步的。
出现问题的原因就是两次异步,由于执行顺序的原因,导致内部状态和UI状态不一致。

源码如下:

- (void)beginRefreshing
{
    ...
    self.state = MJRefreshStateRefreshing;
    ...
}

---

- (void)endRefreshing
{
    dispatch_async(dispatch_get_main_queue(), ^{
        self.state = MJRefreshStateIdle;
    });
}

- (void)setState:(MJRefreshState)state
{
    // 根据状态做事情
    if (state == MJRefreshStateIdle) {
        ...
        // 恢复inset和offset
        [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
            self.scrollView.mj_insetT += self.insetTDelta;
            
            // 自动调整透明度
            if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
        } completion:^(BOOL finished) {
            self.pullingPercent = 0.0;
            
            if (self.endRefreshingCompletionBlock) {
                self.endRefreshingCompletionBlock();
            }
        }];
    } else if (state == MJRefreshStateRefreshing) {
         dispatch_async(dispatch_get_main_queue(), ^{
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                CGFloat top = self.scrollViewOriginalInset.top + self.mj_h;
                // 增加滚动区域top
                self.scrollView.mj_insetT = top;
                // 设置滚动位置
                [self.scrollView setContentOffset:CGPointMake(0, -top) animated:NO];
            } completion:^(BOOL finished) {
                [self executeRefreshingCallback];
            }];
         });
    }
}

按照我们在问题描述中的调用方式,最后执行顺序如下:

  1. dispatch set state idle operation
  2. set state refreshing
  3. dispatch set ui refreshing operation
  4. set state idle
  5. set ui refreshing
    至此,内部状态为idle,UI状态为refreshing。
    内部状态为Idle状态,之后的endRefreshing将不会生效(发现newState与oldState一致就直接返回了),UI无法恢复为Idle状态。

4.问题解决

最好的解决办法是把setState中“更改UI为refreshing状态”的操作变成同步的。避免设置内部状态和设置UI状态的分离,因为两者分离之后,如果中间执行了“设置状态为Idle”,那么将导致最终内部状态为Idle、UI状态为Refreshing的问题,也就是标题所说的内部状态和UI状态不一致的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,151评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,223评论 4 61
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,890评论 18 139
  • 1.虽然用户界面做得风格独特、很简洁,但能不能加个新手引导!!! 2.文章编辑后怎么发到专题啊~ 能不能保持一下传...
    wang351311阅读 556评论 3 1
  • 自从接触简书,通过它了解到一些好书、好的文章、有用的干货等等,这些或受益匪浅或有所启发,但是最大的感受应该是贫穷。...
    夏简之阅读 4,999评论 20 14