Question

我正在尝试获取用户操作的进度条，以使其与服务器能够处理它们的速率正确同步。显然，人们会有一些延迟，我不能仅仅假设每个人都一样，而将其保持固定的比率。因此，我决定将其运行6秒钟（不考虑实际的动作时间，延迟时间），并且只要用户前进到下一个动作并且其耐力降低，它就会更新进度条以重新开始。

只需创建我正在执行的操作的图像：进度条从0％变为100％，停止，当用户的下一个动作开始时，它设置为0％，并在6秒钟内重新填充。

>

我可以在这里设置setState或props，它会像实际进度条一样每20毫秒更新一次，并且会导致无法忍受的延迟，并且进度条非常不稳定。

我对解决方案的最新想法是，在尝试重置进度条之前，检查以前的状态和当前的更新是否确实不同。

因此，似乎返回的先前状态实际上与更新时返回的“新”状态相同。因此，我想知道您如何运行一张支票，该支票可以让我比较之前与订阅中的新提交？

如果有人可以帮助或提供其他（也许更好！哈哈）替代此进度条的方法，我将不胜感激。我只是认为这是唯一的方法之一，除了实际为进度条本身创建订阅并让服务器每20ms发送一次数据外，这似乎对性能造成了可怕的影响..但是我并不是很好受过教育。

before render

  startLoadBar = () => {
    this.timer = setInterval(this.progress, 20);
  };

  progress = () => {
    let elem = document.getElementById("userBar");
    let { progress_bar, updateProgerss } = this.props

    if (100 <= progress_bar) {
      clearInterval(this.timer);
    } else {
      let width = progress_bar + 100 / 300;
      updateProgress(width);
    }
  };

在return语句内：

  <Query query={STAMINA_FETCH}>
                  {({ subscribeToMore, data, loading, error }) => {
                    if (loading) return <Loader />;
                    if (error) return <p>{/**@todo error*/}</p>;
                    if (!subscribe) {
                      subscribe = subscribeToMore({
                        document: staminaChanged,
                        updateQuery: (prev, { subscriptionData }) => {
                          if (!subscriptionData.data) return prev;
                          const { staminaChanged } = subscriptionData.data;
                          console.log("prev " + JSON.stringify(prev));
                          console.log("staminaChanged " + JSON.stringify(staminaChanged.stamina));
                          if (prev.FETCH_STAMINA.stamina !== staminaChanged.stamina) { //// does nothing since both are exactly the same!
                            this.props.updateProgress(0);
                            this.startLoadBar();
                          }
                          return {
                            ...prev,
                            FETCH_STAMINA: staminaChanged,
                          };
                        }
                      });
                    }

react-apollo subscriptionToMore（previous，subscriptionData）之前的实际上不是之前的。与新的传入数据相同的数据

0 个答案: