Как очистить интервал после изменения статуса в ответе API?

Question

Допустим, у меня есть метод checkStatus(), который запускается после успешного ответа на конечную точку. Внутри этого есть setInterval примерно так:

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

Обычно я запрашиваю конечную точку каждые 3 секунды. Как только res.status станет true, я хочу очистить интервал. Компонент все еще там и еще не размонтирован.

Как мне этого добиться?

Answer 1

Присвойте переменную интервалу и очистите интервал на основе условия

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

checkStatus() {
  this.interval()
}

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

Как правило, вам нужно присвоить value функции setInterval и очистить ее в обратном вызове:

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