javascript - Problem with setInterval when i LIMIT mysql rows

I've made simple chat with setInterval that will load everything from if($q == "load") {, and everything works fine but when i want to limit rows from db, for example i want my chat to show only last five, i change this line:

$load = DB::getInstance()->query("SELECT * FROM chat WHERE id > $data");

to this

$load = DB::getInstance()->query("SELECT * FROM chat WHERE id > $data ORDER BY id DESC LIMIT 5");

The setLimiter goes crazy and starts to add every second 5rows + 5rows + 5...etc and they are not the same, it just adds 5 on top every second even when i limit it.

I want to make it to show only last five rows and thats it. I know its simple but looks like ive made mistake somewhere.

EDIT:

This is where i am so far:

https://jsfiddle.net/hg6m32ys/1/

Now when i type message, it goes on top (showing oldest first) until i refresh page, then they go from newest. And limiter is working only on refresh, before that it will display more then 5 messages.

Here you can check demo: https://www.zlatniglas.rs/chat.php

Solution:

I think that's because you set curr_id = retr.id; Then on the next api call you send the new id which will have a different response.

You should set

data: {q:"load", data:0}

In your load_chat function.

And also empty your chat if you don't want to append the same messages multiple time with:

$("#chat-ul").empty();

Before calling the first print_msg in your load_chat function.

The final function could be like this:

function load_chat() {
    $.ajax({
        type: "POST",
        url: "../includes/chat.php",
        data: {q:"load", data:0},
        success: function(retr){
            var msgs = retr.data;
            for(msg in msgs) {
                print_msg(msgs[msg]);
            }
        },
        dataType: "json"
    }).fail(function () {
        print_msg("error: chat can't be loaded!");
    });
}

If you don't want to empty your message to refresh them, you could check if the message already exists in the message list and add it only if it doesn't exist.

function print_msg(msg) {
    var output = "";
    const exists = document.querySelectorAll("#chat-ul .id_" + msg['id']).length !==0;
    if (exists) return;
    if(msg["text"].length === 0) return;
        output = "<span class=id_" + msg['id'] +"><img src='../images/avatars/" + msg['avatar'] + "' width='35' height='35' class='rounded-circle'>" + msg["username"] + ": " + msg["text"] + "</span><br>";
    $("#chat-ul").prepend(output);
    var length = document.querySelectorAll("#chat-ul>span").length;
    while (length >5) {
        $('#chat-ul>span:last').hide(); 
        length--;
    }
    
    $("#chat-ul").scrollTop($("#chat-ul")[0].scrollHeight);
}