如何清除 API 响应中状态更改后的时间间隔？答案

【问题标题】：How to clear interval after status change in an API response?如何清除 API 响应中状态更改后的时间间隔？
【发布时间】：2019-05-15 08:41:10
【问题描述】：

假设我有一个checkStatus() 方法，该方法在对端点的响应成功后触发。这里面有一个setInterval，像这样：

checkStatus() {
    setInterval(() => {
      client
        .query({
          query,
          variables,
        })
        .then(res => {
          if (res.status) {
            console.log("FINISHED!");
          }
        });
    }, 3000);
}

基本上我每 3 秒查询一次端点。一旦res.status 变为true，我想清除间隔。该组件仍然存在，尚未卸载。

我如何做到这一点？

【问题讨论】：

使用clearInterval() 就像这里解释的developer.mozilla.org/de/docs/Web/API/WindowTimers/setInterval

标签： javascript reactjs setinterval

【解决方案1】：

只需清除检查条件中的间隔即可。

例子：

checkStatus() {
  const interval = setInterval(() => {
    client
    .query({
      query,
      variables,
    })
    .then(res => {
      if (res.status) {
        console.log("FINISHED!");
        clearInterval(interval)
      }
    });
  }, 3000);
}

【讨论】：

【解决方案2】：

基本上你需要将value 分配给setInterval 函数并将其清除到你的回调中：

checkStatus() {
    const intervale = setInterval(() => {
      client
        .query({
          query,
          variables,
        })
        .then(res => {
          if (res.status) {
            console.log("FINISHED!");
            clearInterval(intervale)
          }
        });
    }, 3000);
 }

【讨论】：

【解决方案3】：

您需要先存储 setInterval 返回的引用，并将其传递给 clearInterval 以清除它。例如，将引用存储在变量 ref -

checkStatus() {
    const ref = setInterval(() => {
      client
        .query({
          query,
          variables,
        })
        .then(res => {
          if (res.status) {
            clearInterval(ref);
            console.log("FINISHED!");
          }
        });
    }, 3000);
}

【讨论】：

【解决方案4】：

给区间赋值一个变量，根据条件清除区间

this.interval = setInterval(() => {
  client
    .query({
      query,
      variables,
    })
    .then(res => {
      if (res.status) {
        console.log("FINISHED!");
        clearInterval(this.interval)
      }
    });
}, 3000);

checkStatus() {
  this.interval()
}

【讨论】：