title: Rxjs - Table with buttons, wait a certain time after last button pressed before request
body: <p>I would like your help with something I have in mind to be used for things like deleting notifications.</p>
  
  <p>Basically, my users have a list of notifications which they can mark as read.<br>
  Now, my back-end is very sluggish (and I have no control over it).<br>
  Right now, when a user clicks on the notification's <strong>&#9993;</strong> button :  </p>
  
  <ol>
  <li>A request to the back-end is made to mark the notification, then after a back-end response, refresh data with another request;</li>
  <li>The entry is modified in app memory, <em>the view is modified</em></li>
  <li>Refreshed data from <strong>1.</strong> comes back, <em>the view is modified</em></li>
  </ol>
  
  <p>This tanslates to something like this (using Angular's <code>HttpClient</code>) :</p>
  
  <pre class="lang-js prettyprint-override"><code>markAsRead(id: string): void {
    this.http.post(url, body, options)
    .subscribe(() =&gt; this.reloadNotifications());
  
    this.markAsReadInternal(id);
  }
  </code></pre>
  
  <p>Here comes the trouble : when my user decides to do a single action, all is good. But when the user decides to read many notifications, the view can be altered many times as the data refresh.</p>
  
  <p>I can see a way of preventing the problem, but that would mean</p>
  
  <ol>
  <li>Button is clicked;</li>
  <li>Store the id in an array;</li>
  <li>Wait for X milliseconds for another click;</li>
  <li>If a click occured back to <strong>2.</strong>, else</li>
  <li>Send the request with the array of ids and refresh the data</li>
  </ol>
  
  <p>Any help to translate that into rxjs code?</p>
  
  <p><em>Bonus point</em>: My data is refreshed every 5 seconds in any case...</p>