Question

假设我有一个checkStatus()方法，该方法在对端点的响应成功之后触发。在其中有一个setInterval，如下所示：

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

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

我该如何实现？

Answer 1

基本上，您需要为value函数分配一个setInterval并将其清除到您的回调中：

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

Answer 2

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

示例：

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

Answer 3

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

中

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

Answer 4

为间隔分配一个变量，并根据条件清除间隔

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

checkStatus() {
  this.interval()
}

如何在API响应中更改状态更改后的间隔？

4 个答案: