Блог

Главная - Вопросы по программированию - Я использую setTimeout() для вызова функции обновления, но она не прекращает вызывать обновление при переходе к другому компоненту?

Я использую setTimeout() для вызова функции обновления, но она не прекращает вызывать обновление при переходе к другому компоненту?

#javascript #angular

#javascript #angular

Вопрос:

Я новичок в angular, и у меня есть функция refresh, которую мне нужно вызывать каждые 1 минуту, но когда я вхожу в этот компонент, он работает нормально, и когда я перехожу к какому-либо другому представлению, он все еще вызывает функцию обновления, функция обновления вызывается в ngOnInit(), а затемэту функцию setTimeout() я создал только в функции refresh() .

 ngOnInit(){
 this.refresh();
 }
 ...
 ...

refresh(){
...
...

setTimeout(() => {
  this.refresh();
   },10000) 
 }

Комментарии:

1. Вы создали рекурсивный вызов без каких-либо условий для его остановки.

2. Да, это то, что я хочу знать, как мне это остановить, сначала я использовал subscribe и unsubscribe, но затем сначала он останавливает интервал, если перейти на другую страницу, но затем, когда я возвращаюсь на ту же страницу, он запускается снова, но никогда не останавливается. Но я попробую эти 2 ответа

3. вы можете поставить условие либо перед вызовом setTimeout, либо перед вызовом refresh из setTimeout . Любой из приведенных ответов подойдет для вашего варианта использования.

Ответ №1:

Вы должны использовать setInterval вместо setTimeout и в ngOnDestroy, который вам нужно использовать clearInterval 

 this.timer = setInterval(() => {
   this.refresh();
}, 10000);

Очистить интервал

 ngOnDestroy(){
  clearInterval(this.timer);
}

Комментарии:

1. Она отлично работает, когда я перехожу к какому-либо другому представлению, но когда я снова хочу вернуться к тому же представлению, вызывается эта функция setInterval(), а затем, когда я снова меняю представление, тогда также вызывается refresh() . Чего мне не хватает?

2. Вам нужно убедиться, что вы очищаете setInterval в ngOnDestroy hook

Ответ №2:

Вы можете создать еще одно свойство timeout , подобное и обновить свой класс следующим образом,

 ngOnInit(){
 this.refresh();
 }
 ...
 ...
timeout;
refresh(){
...
...

this.timeout = setTimeout(() => {
  this.refresh();
   },10000) 
 }
 
 ngOnDestroy(){
  clearTimeout(this.timeout);
}

Кроме того, ваш класс должен будет реализовать OnDestroy интерфейс для этого OnInit .

Хотя для вашего варианта использования это setInterval имеет больше смысла, а также вы можете создать повторно используемую службу, например IntervalService , для инкапсуляции всего поведения.

Бит setInterval :-

 interval;

ngOnInit()
{
this.interval = setInterval(() => {
   this.refresh();
}, 10000);
}
ngOnDestroy(){
  clearInterval(this.interval);
}

refresh(){....}

Комментарии:

1. Он отлично работает, когда я перехожу к какому-либо другому представлению, но когда я снова хочу вернуться к тому же представлению, вызывается эта функция setInterval, а затем, когда я снова меняю представление, тогда также вызывается refresh() . Чего мне не хватает?

2. Вы правильно запускаете интервал внутри метода жизненного цикла инициализации? Если ваше обновление вызывает API, и вы разрешаете обещание, то вполне возможно, что API разрешится после того, как ваш компонент уже вызвал метод жизненного цикла уничтожения, но интервал должен был обязательно прекратиться. Вы можете заменить бит обещания на subscribe / unsubscribe для отсутствия устаревших запросов.

Метки: