Notifications are Stacked Using SetInterval

Environment

Description

If I toggle the Kendo UI for Angular Notification in setInterval and switch the browser tab, the notifications start to stack.

Cause

To improve the performance, most browsers set low priority execution to inactive tabs which can affect timers. When а tab gets inactive it pauses the requestAnimationFrame.

Solution

Choose one of the following solutions to avoid stacking the Notifications when switching tabs:

• Disable the Notification animations.

• Clear the interval according to the active state of the browser tab. То check the visibility state of the tab, use the generic visibilitychange event and the visibilityState property.

  Copy Codepublic ngOnInit() {
      document.addEventListener('visibilitychange', () => {
          if (document.visibilityState === 'hidden') {
              clearInterval(this.intervalRef);
          } else {
              this.showNotification();
          }
      });
  }

The following example demonstrates the second approach in action.