JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<h1>List Length: <span id="len">0</span></h1>
<pre id='list'></pre>

JavaScript

//self cleaning list
obj = {
    len: 0
},
elm = document.getElementById('len'),
list = document.getElementById('list');

//fake data stream
setInterval(function() {
    epoch = +new Date();
    amount = Math.floor(Math.random() * 10);
    //console.log('add', amount, 'more');
    amount += epoch;
    for (i = epoch; i < amount; i++) {
        //use epoch as unique id
        item = {
            id: i,
            l: 1
        };
        obj[item.id] = item;
        obj.len++;
    }
}, 900);

//tick list life
setInterval(function() {
    len = obj.len;
    if (len == 0) {
        //console.log('nothing to do');
        return;
    }
    for (prop in obj) {
        item = obj[prop];
        if (item) {
            item.l -= .1;
            if (item.l <= 0) {
                delete obj[item.id];
                obj.len--;
            }
        }
    }
    elm.innerHTML = obj.len;
    list.innerHTML = JSON.stringify(obj);
}, 200);