остановить непрерывно вызываемую функцию в угловом

Question

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

моя функция выглядит как

  getData(ahu) {
    console.log('In get data function')
    console.log(ahu)
    setInterval(() => {
      this.getDataRealTime(ahu);
    }, 10000);
  }

<button mat-flat-button (click)="getData(L1)">L1</button>
<button mat-flat-button (click)="getData(L2)">L2</button>

Поэтому, когда я нажимаю кнопку L1, данныепродолжает прибывать для L1 каждые 10 секунд. Теперь, когда я нажимаю L2, данные L2 приходят, но данные от L1 не останавливаются. Я хочу данные только от L1. Может ли кто-нибудь помочь мне с этим?

Спасибо

Answer 1

Используйте clearInterval, чтобы остановить предыдущий вызов непосредственно перед вызовом setInterval:

var intervalId;

function getData(ahu) {
    console.log('In get data function')
    console.log(ahu)
    clearInterval(intervalId); // use either global or this.intervalId
    intervalId = setInterval(() => { // same here.
      this.getDataRealTime(ahu);
    }, 10000);
}

Answer 2

Когда вы видите, что это происходит, это означает, что вы меняете модель таким образом, что Angular должен повторно запустить дайджест и снова запустить часы. В вашем конкретном случае вы вызываете функцию, которая обновляет счетчик, который отображается на странице. Когда значение счетчика изменяется, он снова запускает дайджест, который вызывает функцию, которая обновляет счетчик и т. Д.