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状态）。下面具体分析一下。

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. 将设标志为 Idle 操作入主线程队列
2. 同步执行设标志为 Refreshing，将设 UI 为 Refreshing 样式操作入主线程队列
3. 主线程队列中的操作开始执行，执行设标志为 Idle 操作，同时执行将 UI 设为 Idle 样式
4. 主线程继续执行队列中的操作，设 UI 为 Refreshing 样式

    至此，内部状态为idle，UI状态为refreshing。 内部状态为Idle状态，之后的endRefreshing将不会生效（发现newState与oldState一致就直接返回了），UI无法恢复为Idle状态。

4. 问题解决

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