Created
January 26, 2019 11:17
-
-
Save kievsash/3402e70d21b9d0ef10679fb61f695385 to your computer and use it in GitHub Desktop.
Throttling notifications from multiple users with RxJS - no throttling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let Rx = window['rxjs']; | |
let {from, of, asyncScheduler} = Rx; | |
let {mergeMap, filter, delay} = Rx.operators; | |
console.clear(); | |
let notifications = [ | |
{ userId: 1, name: 'A1', delay: 100 }, // should be shown | |
{ userId: 1, name: 'A2', delay: 1500 }, // shouldn't be shown | |
{ userId: 1, name: 'A3', delay: 2500 }, // shouldn't be shown | |
{ userId: 1, name: 'A4', delay: 3500 }, // should be shown | |
{ userId: 2, name: 'B1', delay: 200 }, // should be shown | |
{ userId: 2, name: 'B2', delay: 300 }, // shouldn't be shown | |
{ userId: 2, name: 'B3', delay: 3500 }, // should be shown | |
] | |
//mock source that emits notifications | |
let mockSource$ = from(notifications).pipe( | |
mergeMap((notif) => { | |
return of(notif).pipe(delay(notif.delay)); | |
}), | |
) | |
mockSource$.subscribe(showNotification); | |
//display notifications widget | |
let container = document.querySelector('.container'); | |
function showNotification(notif) { | |
const newElem = document.createElement('div'); | |
newElem.classList.add('item'); | |
newElem.innerHTML = notif.name; | |
container.appendChild(newElem); | |
setTimeout(() => {newElem.remove()}, 800); // remove notification element | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment