Как обрабатывать номера страниц для бесконечной прокрутки с помощью Jquery / Ajax? - PullRequest
Новая
       6

Как обрабатывать номера страниц для бесконечной прокрутки с помощью Jquery / Ajax?

0 голосов
/ 10 мая 2018

Я впервые пытаюсь реализовать бесконечную прокрутку с помощью JQuery / Ajax. Вот где я сейчас нахожусь: 

<script>
$(document).ready(function() {
    // see if we're at the bottom of the page to potentially load more content
    $(window).on('scroll', scrollProducts);

    function scrollProducts() {
        var end = $("#footer").offset().top;
        var viewEnd = $(window).scrollTop() + $(window).height();
        var distance = end - viewEnd;

        // when we're almost at the bottom
        if (distance < 300)  {
            // unbind to prevent excessive firing
            $(window).off('scroll', scrollProducts);
            console.log('we reached the bottom');

            $.ajax({
                type: 'GET',
                url: "foo/bar/2",
                success: function(data) {
                    console.log("success!");
                    $('#container').append(data).fadeIn();
                    // rebind after successful update
                    $(window).on('scroll', scrollProducts);
                }
            });
        }
    }
});
</script>

Я хотел бы понять, как правильно обновить номер страницы в URL: foo/bar/2.

Я читал, что из-за разницы между синхронными и асинхронными вызовами нельзя использовать глобальную переменную, но вместо этого требуется обратный вызов (хотя я не понимаю этого). Я также видел решение, в котором кто-то обновил значения скрытых полей, а затем сослался на них, хотя это кажется уродливым обходным путем.

Каков правильный или рекомендуемый способ обработки номеров страниц в этой ситуации, чтобы число увеличивалось с каждым запросом, пока не осталось больше страниц?

1 Ответ

0 голосов
/ 10 мая 2018

держите счетчик и используйте его в своем запросе 

var page = 1;

$(document).ready(function() {
// see if we're at the bottom of the page to potentially load more content
$(window).on('scroll', scrollProducts);

function scrollProducts() {
    var end = $("#footer").offset().top;
    var viewEnd = $(window).scrollTop() + $(window).height();
    var distance = end - viewEnd;

    // when we're almost at the bottom
    if (distance < 300)  {
        // unbind to prevent excessive firing
        $(window).off('scroll', scrollProducts);
        console.log('we reached the bottom');

        $.ajax({
            type: 'GET',
            url: "foo/bar/" + page,
            success: function(data) {
                console.log("success!");
                $('#container').append(data).fadeIn();
                // rebind after successful update
                $(window).on('scroll', scrollProducts);
                page++;
            }
        });
    }
}
});
...