title: Most effective way to apply frequent CSS changes in Angular 2
body: <p>We have an Angular 2 site with a websocket pumping in data from backend to our grid. To indicate the recent updates we use CSS to set background color for the row and bold font on cells that are affected.</p>
  
  <p>The indication should only last a short time.</p>
  
  <p>1) Our first attempt was to reset all indicators when the next batch arrived from server. This was working well but in some views there are very seldom updates which means the indicators can stay very long which is kind of confusing. </p>
  
  <p>It would be more consistent if update indicators disappeared after a fixed interval, like 4 seconds.</p>
  
  <p>2) Our next attempt was to use CSS animations. But after a while it was lagging a lot. The impression is that too many animations running will overload the browser not coping with the requested times. Maybe each animation has its own timer in the background?</p>
  
  <p>3) The third attempt is to have one timer running at fixed intervals and then checking what records to reset. We have created a TimerService that will regularly check for due items. When adding an item to the timer pool it can be configured with arbitrary wait time.</p>
  
  <p>This works, but in the log window there are frequent violation warnings:</p>
  
  <pre><code>[Violation] 'setInterval' handler took 56ms
  [Violation] 'setInterval' handler took 74ms
  [Violation] 'setInterval' handler took 63ms
  [Violation] 'setInterval' handler took 88ms
  ...
  </code></pre>
  
  <p>But when we time what happens inside the checkItems method it just takes 0.03ms!</p>
  
  <ul>
  <li><p>We all have C# background and have just been working with Angular for some months. Maybe we are imposing a backend approach?</p></li>
  <li><p>Is there a context switching going on that we have missed?</p></li>
  <li><p>Is there an alternative more <em>frontend friendly</em> approach?</p></li>
  <li><p>Are there some crucial optimizations we could do to our code?</p></li>
  </ul>
  
  <p>All suggestions are appreciated!</p>
  
  <p>Here is the suggested TimerService causing all warnings:</p>
  
  <pre><code>import { Injectable, OnInit } from "@angular/core";
  import { Observable } from "rxjs/Rx";
  import { Subject } from "rxjs/Subject";
  
  @Injectable()
  export class TimerService {
      private timerItems: TimerItem[] = [];
      private dueTimeReachedSubject: Subject&lt;string&gt; = new Subject&lt;string&gt;();
      public dueTimeReached: Observable&lt;string&gt; = this.dueTimeReachedSubject.asObservable();
  
      constructor() {
          setInterval(() =&gt; this.checkItems(), 1000);
      }
  
      private checkItems() {
          let now = Date.now();
          let removeKeys: string[] = [];
          this.timerItems.filter(t =&gt; t.dueTime &lt;= now).forEach(t =&gt; {
              this.dueTimeReachedSubject.next(t.key);
              removeKeys.push(t.key);
          });
          this.timerItems = this.timerItems.filter(t =&gt; removeKeys.indexOf(t.key) &lt; 0);
      }
  
      public add(key: string, delayInSeconds: number) {
          let dueTime = Date.now() + delayInSeconds * 1000;
          let timerItem = this.timerItems.find(t =&gt; t.key === key);
          if (timerItem) {
              timerItem.dueTime = dueTime;
          }
          else {
              this.timerItems.push(new TimerItem(key, dueTime));
          }
      }   
  
      public remove(key: string) {
          this.timerItems = this.timerItems.filter(t =&gt; t.key !== key);
      }
  }
  
  
  class TimerItem {
      constructor(public key: string, public dueTime: number) { }
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I tried to use Observable.interval: Same result with exactly the same warning message: "[Violation] 'setInterval' handler took xx ms"</p>
  
  <p>I tried to use setTimeout with repeated calls: Same result but with modified warning message: "[Violation] 'setTimeout' handler took xx ms"</p>
  
  <p>I even tried to empty the checkItems of every line and I still get the warnings.</p>
  
  <p>The warning is thrown from within zone.js and seems to be an Angular inner recommendation. I know I can turn off verbose logging in Chrome developer tools, but I often use console.debug for development purposes and that means they will disappear as well.</p>
  
  <p>A warning is OK I guess for slow functions, but in this case it is just triggering a setInterval function. Why would that be slow?</p>