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状态不一致的问题。