Не работает реализация алгоритма, поможете найти ошибку?

Question

[Banan44]

function viewMessages(){

       var objDiv = document.getElementById("messages");

	// Если скролл был до конца
	if(objDiv.scrollHeight - objDiv.scrollTop === objDiv.clientHeight){
		var bottom = "yes";
	}

	// data - Ответ от view.php
    $.get('php/view.php', function(data){
    	// Вставляем ответ в блок Messages
        document.getElementById("messages").innerHTML = data;
    });

    // Скроллим еще ниже
	if(bottom == "yes"){
		objDiv.scrollTop = objDiv.scrollHeight;
	}
	bottom = "no";

	// Повторно вызываем просмотр сообщений
	setTimeout(viewMessages, 500);

};

Суть такая мы проверяем была ли прокрутка до конца, до вывода сообщений.
Если была, то после вывода сообщений мы скроллим вниз.

Т.е должно быть как во ВКонтакте, когда мы находимся внизу и появляются новые сообщения то прокрутка не остается на месте и внизу не копятся сообщения, а он сам скроллит еще ниже.

Но у меня почему то не работает, поможете найти ошибку? Где я прокололся?

P.S.
Добавил алерты и все работает, без них не работает, что за магия?

Comments

[Антон Неверов]

По вашему вопросу - создайте код пен, так проще будет вам помочь.
И не используйте вы переменные да/нет как строки. Есть true и false. Это намного надёжнее, практичнее и чище.

[Banan44]

Антон Неверов, там очень большой код из нескольких страниц и файлов.

[Banan44]

Антон Неверов, а данные из бд берутся

[Сергей Горностаев]

Какая-то мешанина из ванильного JS и jQuery. Зачем так делать?

[Banan44]

Сергей Горностаев, мне легче с ajax работать через jquery

[alex-1917]

Banan44, да он тебе про то, что если уж используешь джиквери
$.get
то вместо

document.getElementById("messages").innerHTML = data;

делай так
$("messages").html(data);

Answer 1

[Роман]

замените:

// Скроллим еще ниже
  if(scrollBottom == true){
    //alert("Скроллим вниз");
    objDiv.scrollTop = objDiv.scrollHeight;
  }

на

// Скроллим еще ниже
  if(scrollBottom == true){
    //alert("Скроллим вниз");
    setTimeout(()=>{
       objDiv.scrollTop = objDiv.scrollHeight;
    },1000);
  }

Но это будет ненадежный костыль, по хорошему тут надо все переделать, включая и php/view.php

Не работало как надо потому, что без сеттаймоута вы сразу после замены сообщений в блоке мессаджес пытаетесь проскролить, но браузер в этот момент еще не отработал вставку (тоесть новые сообщения еще не заменили старые и не изменили высоту прокрутки)

соответственно с сеттаймоутом вы даете время браузеру отработать вставку сообщений, и на момент когда вы делаете objDiv.scrollTop = objDiv.scrollHeight; в блоке уже новые сообщения.

с алертом работало по той же причине, алерт не асинхронный, и потому пока висел алерт, код дальше не выполнялся, а начинал выполнятся после закрытия алерта. Таким образом, пока вы тянулись мышкой закрывать алерт, давали браузеру время вставить и отобразить новый блок сообщений.

Вся эта система по сути сейчас работает на багах, я бы советовал задать еще один вопрос о том как правильно сделать данный функционал (как оптимизировать объем передаваемых сообщений и обновление блока с сообщениями)