Остановка функции обновления Использование clearInterval () в Angular 6 не работает? - PullRequest
Новая
       12

Остановка функции обновления Использование clearInterval () в Angular 6 не работает?

0 голосов
/ 27 сентября 2019

Я реализую функцию обновления на странице, где у пользователя есть два варианта. Кнопки обновления

  1. Обновление страницы при нажатии на кнопку Обновить (прямо)

  2. Дайте пользователю возможностьустановить частоту обновления (возможность обновления страницы после определенного интервала) установить обновление интервала

Как вы можете видеть на изображении, есть разные значения для каждого интервала, который ясохранение в следующем объекте, как это. 

timer: RefreshTimer[] = [
{value: 15000, time: '15 Sec'},
{value: 30000, time: '30 Sec'},
{value: 45000, time: '45 Sec'},
{value: 100000, time: '1 min'},
{value: null, time: 'Cancel'}];

Я использую setInterval() для калибровки refresh() метод, как показано ниже: 

refresh() {
this.router.navigateByUrl('./views/refresh/', { skipLocationChange: true }).then(() => {
  console.log(decodeURI(this.location.path()));
  this.router.navigate([decodeURI(this.location.path())]);
});}

refreshFrequency(time) {
     if(time === null){
        this.counter = 110;
     }
this.progressInterval = setInterval(() => {
  this.counter += 10;
  this.refresh();
  console.log('this.counter', this.counter);

  if(this.counter >= 100){
    clearInterval(this.progressInterval);
    console.log('cleaned and finished');
  }
},time);

}

Вызов setInterval() Вот так: 

<mat-form-field class="timer" style="width: 10px;">
           <i class="far fa-clock"></i>
           <mat-select class="alarm-dropdown" trigger="alarmTrigger" #alarmSelect>
           <mat-option   *ngFor="let time of timer" 
                  (click)="refreshFrequency(time.value)" 
                  [value]="time.value">
              {{time.time}}
            </mat-option>
            </mat-select>
 </mat-form-field>

Это поведение сейчас, clearInterval() не работает после того, как я выбираю Cancel из DDL.
1. Шаг 1
2. Шаг 2
3. Шаг 3

Спасибо за помощь.

Редактировать: Вот SlackBitz для него.

1 Ответ

0 голосов
/ 27 сентября 2019

Таймеры могут быть полезны, но они известны тем, что бегают с ума, поэтому используйте их с осторожностью.Пока вы будете уверены, что не создадите больше таймеров, чем вам нужно, и что вы не потеряете следы существующих, все будет в порядке.Примерно так:

Сохранить ссылку на таймер 

this.intervalReference = null;

Изолировать логику для запуска и очистки таймера.Убедитесь, что он работает только один таймер, иначе ваша ссылка будет перезаписана. 

if (!this.intervalReference) {
    setInterval(() => {
        this.counter += 10;
        this.refresh();
        console.log('this.counter', this.counter);
        if (this.counter >= 100) {
            clearInterval(this.intervalReference);
            console.log('cleaned and finished');
            this.intervalReference = null;
        }
    }, time);
}
...