fix(breakpoint-observer): fix the breakpoint observer emit count and accuracy

[TrevorKarjanis]

The breakpoint observer emits multiple and incorrect states when more than one query changes.
Debounce the observer emissions to eliminate the incorrect states and emit once.

References #10925 #15868

I have reproduced this in Chrome, Firefox, Safari, Edge, and IE. It occurs because the media query API fires an event when a query match changes. The breakpoint observer emits once for each event, updating the state of one query each time. Therefore, the observer may emit multiple times for one change and the reported intermediary states can be incorrect. I have reproduced up to five emissions for a single change.

https://stackblitz.com/edit/angular-6pmabc

matches: false
breakpoints:
{
"(max-width: 599.99px)": false,
"(min-width: 600px) and (max-width: 959.99px)": false,
"(min-width: 960px) and (max-width: 1279.99px)": false,
"(min-width: 1280px) and (max-width: 1919.99px)": false,
"(min-width: 1920px)": false
}
matches: true
breakpoints:
{
"(max-width: 599.99px)": false,
"(min-width: 600px) and (max-width: 959.99px)": true,
"(min-width: 960px) and (max-width: 1279.99px)": false,
"(min-width: 1280px) and (max-width: 1919.99px)": false,
"(min-width: 1920px)": false
}

PR #11007 attempted to resolve this issue. However, the issue still reproduces. My understanding is that the AsapScheduler uses a microtask which fails to debounce the media query events. Using the AsyncScheduler resolves the issue. AsyncScheduler uses a timer, setInterval, that may technically be slower on the first bounce but is more efficient across multiple.

[josephperrott]

LGTM

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}