#1. Leaking Between:

window.setInterval(update, 100);

And:

leadsRef.on('value', function(snapshot) {...}

You are adding a new copy of the event handler every 100ms. which just stacks the handle so it runs (time elapsed since page load)/100ms times every time data hits the pipe.

Setting your on('value') handler should fire every time firebase get new data. It's a watcher you've got here not a getter.

#2. Redundant Look ups document.getElementById("comments") This can be held in a variable and reused rather than finding the element for every stub of text.

#3. innerHTML Setting innerHTML from user input is considered bad practice, use innerText instead. Also build you full string(if possible) and and update all at once, this limits the browser having to re-render the page

#4. Data / Output Structure Each message is an individual item and should be treated as such, showing all the messages into a single p element muddies the distinction and make addressing an individual item difficult if desired

#Other/Misc You should be able to replace the provided code with somthing like this (warning untested, also assumes comments is a div not a p as in the linked code):

firebase.database().ref(room).on('value', function (snapshot) {
    var comments = [];
    snapshot.forEach(function (childSnapshot) {
        var childData = childSnapshot.val();
        var commentElm = document.createElement("div");
        commentElm.setAttribute("class", "comment")
        commentElm.innerText = encode(childData.datee) + "      " + encode(childData.namee) + ": " + encode(childData.contentss);
        comments.push(commentElm)
    });
    document.getElementById("comments").append(...comments)
    return 0;
});

Also there is an additional bug with room handling, when changing rooms the handler should be removed and recreated for the new room.

And your linked code pollutes all over the global space >.> not as important since it's not a shared lib but it still rubs me the wrong way.

#1. Leaking Between:

window.setInterval(update, 100);

And:

leadsRef.on('value', function(snapshot) {...}

You are adding a new copy of the event handler every 100ms. which just stacks the handle so it runs (time elapsed since page load)/100ms times every time data hits the pipe.

Setting your on('value') handler should fire every time firebase get new data. It's a watcher you've got here not a getter.

#2. Redundant Look ups document.getElementById("comments") This can be held in a variable and reused rather than finding the element for every stub of text.

#3. innerHTML Setting innerHTML from user input is considered bad practice, use innerText instead. Also build you full string(if possible) and and update all at once, this limits the browser having to re-render the page

#4. Data / Output Structure Each message is an individual item and should be treated as such, showing all the messages into a single p element muddies the distinction and make addressing an individual item difficult if desired

#Other/Misc You should be able to replace the provided code with somthing like this (warning untested, also assumes comments is a div not a p as in the linked code):

firebase.database().ref(room).on('value', function (snapshot) {
    var comments = [];
    var commentParent = document.getElementById("comments")
    snapshot.forEach(function (childSnapshot) {
        var childData = childSnapshot.val();
        var commentElm = document.createElement("div");
        commentElm.setAttribute("class", "comment")
        commentElm.innerText = encode(childData.datee) + "      " + encode(childData.namee) + ": " + encode(childData.contentss);
        comments.push(commentElm)
    });
    commentParent.innerHTML=''
    commentParent.append(...comments)
    return 0;
});

Also there is an additional bug with room handling, when changing rooms the handler should be removed and recreated for the new room.

And your linked code pollutes all over the global space >.> not as important since it's not a shared lib but it still rubs me the wrong way.

jsfiddle: https://jsfiddle.net/plloi/fc37pmqa/

#1. Leaking Between:

window.setInterval(update, 100);

And:

leadsRef.on('value', function(snapshot) {...}

You are adding a new copy of the event handler every 100ms. which just stacks the handle so it runs (time elapsed since page load)/100ms times every time data hits the pipe.

Setting your on('value') handler should fire every time firebase get new data. It's a watcher you've got here not a getter.

#2. Redundant Look ups document.getElementById("comments") This can be held in a variable and reused rather than finding the element for every stub of text.

#3. innerHTML Setting innerHTML from user input is considered bad practice, use innerText instead. Also build you full string(if possible) and and update all at once, this limits the browser having to re-render the page

#4. Data / Output Structure Each message is an individual item and should be treated as such, showing all the messages into a single p element muddies the distinction and make addressing an individual item difficult if desired

#Other/Misc You should be able to replace the provided code with somthing like this (warning untested, also assumes comments is a div not a p as in the linked code):

firebase.database().ref(room).on('value', function (snapshot) {
    var comments = [];
    snapshot.forEach(function (childSnapshot) {
        var childData = childSnapshot.val();
        var commentElm = document.createElement("div");
        commentElm.setAttribute("class", "comment")
        commentElm.innerText = encode(childData.datee) + "      " + encode(childData.namee) + ": " + encode(childData.contentss);
        comments.push(commentElm)
    });
    document.getElementById("comments").append(comments)
    return 0;
});

Also there is an additional bug with room handling, when changing rooms the handler should be removed and recreated for the new room.

And your linked code pollutes all over the global space >.> not as important since it's not a shared lib but it still rubs me the wrong way.

#1. Leaking Between:

window.setInterval(update, 100);

And:

leadsRef.on('value', function(snapshot) {...}

You are adding a new copy of the event handler every 100ms. which just stacks the handle so it runs (time elapsed since page load)/100ms times every time data hits the pipe.

Setting your on('value') handler should fire every time firebase get new data. It's a watcher you've got here not a getter.

#2. Redundant Look ups document.getElementById("comments") This can be held in a variable and reused rather than finding the element for every stub of text.

#3. innerHTML Setting innerHTML from user input is considered bad practice, use innerText instead. Also build you full string(if possible) and and update all at once, this limits the browser having to re-render the page

#4. Data / Output Structure Each message is an individual item and should be treated as such, showing all the messages into a single p element muddies the distinction and make addressing an individual item difficult if desired

#Other/Misc You should be able to replace the provided code with somthing like this (warning untested, also assumes comments is a div not a p as in the linked code):

firebase.database().ref(room).on('value', function (snapshot) {
    var comments = [];
    snapshot.forEach(function (childSnapshot) {
        var childData = childSnapshot.val();
        var commentElm = document.createElement("div");
        commentElm.setAttribute("class", "comment")
        commentElm.innerText = encode(childData.datee) + "      " + encode(childData.namee) + ": " + encode(childData.contentss);
        comments.push(commentElm)
    });
    document.getElementById("comments").append(...comments)
    return 0;
});

Also there is an additional bug with room handling, when changing rooms the handler should be removed and recreated for the new room.

And your linked code pollutes all over the global space >.> not as important since it's not a shared lib but it still rubs me the wrong way.