Как я могу обработать запрос ajax только при необходимости, а не каждую секунду

Question

По сути, я занимаюсь разработкой чата ajax (php, mysql, javascript, ajax), есть часть кода, в которую я извлекаю все сообщения чата внутри div с помощью ajax, функция ajax выполняется каждые 2 секунды.

Моя главная проблема в том, что div прокручивается вниз каждые 2 секунды, мне нужно, чтобы он прокручивался вниз только при появлении новой записи (прокрутка вниз для всех пользователей чата, не только для меня)

function loadLog(){     
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
        url: "ajaxchat.php",
        cache: false,
        success: function(html){
            $("#chatbox").html(html); //Insert chat log into the #chatbox div               
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //i need to scroll if only there is new entry not every 2.5 sec 
            }               
        },
    });
}
setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

Answer 1

Простым решением было бы проверить, что новый HTML отличается от старого HTML перед обновлением chatbox. Это обеспечит обновление chatbox только при получении нового контента с сервера. Однако если вы ответите, что HTML несовместим, это не сработает.

var previousChatHTML = '';
function showChatMessages(html) {
    if(previousChatHTML === html){
        return;
    }
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $("#chatbox").html(html); //Insert chat log into the #chatbox div  
    previousChatHTML = html;   
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
        $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //i need to scroll if only there is new entry not every 2.5 sec 
    }               
}

function loadLog(){     
    $.ajax({
        url: "ajaxchat.php",
        cache: false,
        success: showChatMessages,
    });
}
setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

Также при создании поллеров в JS вы можете использовать setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) вместо setInterval, так как на медленных соединениях вы можете получить странные результаты (если запрос занимает больше 2,5 с, он может быть обработан в неправильном порядке). ).

Answer 2

Вы не можете сделать это с LAMP. Вам нужен ответ на события с сервера.Вы можете сделать это с этим стеком

• NodeJS: Javascript на стороне сервера / https://nodejs.org/es/
• Socket.IO: Связь сервера / клиента в реальном времени: https://socket.io/
• Firebase: База данных BaaS для связи в реальном времени https://firebase.google.com/

---

Вашему серверу требуется ответ на события базы данных.Ответ PHP на события клиента.