RxJS interval() varies wildly in MS Edge

Question

I have an Angular 6 application that performs an API call every 10 seconds to update price quotes. The timing of the API calls is manages using RxJS interval().

For some reason, on MS Edge, the timings vary wildly, from a couple of seconds, to minutes. Any ideas what might be the cause?

Here is the code:

const refreshPriceInterval = interval(10000);
let startTime = new Date(), endTime: Date;

refreshPriceInterval.pipe(
        startWith(0),
        flatMap(() => {
            endTime = new Date();
            let timeDiff = endTime.getTime() - startTime.getTime(); //in ms
            // strip the ms
            timeDiff /= 1000;
            console.log(timeDiff);
            startTime = new Date();
            return this.timeseriesService.getQuote(symbol, this.userInfo.apiLanguage);
        })
)

Here is the console output:

0.001
18.143
4.111
11.057
13.633
12.895
3.003
12.394
7.336
31.616
20.221
10.461

Is there a way to increase the accuracy?

EDIT:

Performance degrades over time.

Reducing the code in the interval() to only a console.log does not perform any better.

Might be an Angular issue.

Answer 1

It was indeed an Angular issue. Timed processes cause Angular to constantly re-render the app, which can be quite resource intensive.

I used runOutsideAngular() to circumvent this issue. It turned out that I only had to run one function outside of Angular:

this.ngZone.runOutsideAngular(() => {
    this.handleMouseEvents();
});

Thanks to Mark van Straten for your input!