Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Неявная ошибка скрола (https://javascript.ru/forum/events/80439-neyavnaya-oshibka-skrola.html)

begovik 05.06.2020 00:44

Неявная ошибка скрола
 
Зравствуйте! Много расписывать не буду, т.к. надеюсь, что для pro-программеров эта строчка будет понятной. Если же нет - буду тогда сам разбираться.

Значит, когда пользователь доскроливает до низа документа, AJAX-ом вызывается уже php-скрипт. И тут всё работает. Но мне нужно, чтобы скрипт вызывался, когда до низа остаётся ещё 60px, и когда я эти 60 подставляю, то php-скрипт вызывается сразу трижды:blink:
Так в чём же причина?

Корректная версия:
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {


А вот не корректная:
if ($(window).scrollTop() + $(window).height() + 60 >= $(document).height()) {

рони 05.06.2020 07:22

begovik,
скролл это пулемёт, за 60 пикселей успевает выстрелить 3 раза и более, ставьте флаг что ушли на сервер и не запускайте повторно запрос, пока не получите ответ.

begovik 05.06.2020 11:19

Да, примерно так я себе это и представлял. У меня в коде подобный флаг устанавливается, но видимо не в том месте. Спасибо, что направили в нужную сторону.

begovik 06.06.2020 04:12

Ужас, никак не выходит, я уже всю голову об стену разбил!
Подскажите пожалуйста, кто знает как сделать, чтоб корректно заработало.
При прокрутке до низа должна подгружаться партия товаров, а они подгружаются все, потому что происходит несколько обращений, хотя флаг (busy) на время выполнения обращения к серверу установлен.
Выкладываю полностью функцию:
$(document).ready(function(){
    if ($(".main-container").hasClass("catalog-page")) {
        let  scrollFrom = 0, busy = false, category;
        $(window).scroll(function(){
        	if ( $(window).scrollTop() > scrollFrom ) {

	        	$('#toTop').html($(window).scrollTop() + $(window).height()+'\r\n'+$(document).height());
	            if ($(document).height() - 60 <= $(window).scrollTop() + $(window).height() && !busy) {
	                category = $('.catalog h1').text();
	                $.ajax({
	                    url: "ajax.php",
	                    type: "post",
	                    data: {"showmore": category},
	                    dataType: "html",
	                    beforeSend: function () { busy = true; }
	                }).done(function (data) {
	                	console.log(data);
	                	console.log($('.no-products').length);
	                    if (data != 0 || data != '0') {
	                        $("#main-catalog").show(500, function() {
	                            $("#main-catalog").append(data);
	                        });
	                    } else if (!$('.no-products').length) {
	                        $("#main-catalog").show(500, function() {
	                            $("#main-catalog").append('<div class="col-12 no-products"> <h5 class="endoc">Нет товаров для показа.</h5> </div>');
	                        });
	                    }
	                });
	                busy = false;
	            }
	            // console.log(flag);

	        }scrollFrom = $(window).scrollTop();
        });
    }
});

рони 06.06.2020 13:49

Цитата:

Сообщение от begovik
хотя флаг (busy) на время выполнения обращения к серверу установлен.

!!! перенесите строку 29 в ответ сервера, в начало строки 28.

begovik 06.06.2020 14:18

Спасибо, рони, всё заработало, ОЧЕНЬ вам благодарен, вы даже не представляете насколько!:thanks:
Пойду посплю.


Часовой пояс GMT +3, время: 19:38.