Как обрабатывать новое добавление данных при бесконечной прокрутке DOM

Question

У меня возник вопрос, где я думал, что мне нужен совет экспертов. У меня есть бесконечно прокручиваемый div, который загружается списком по 10 за раз. Все работает нормально, если в списке нет изменений.

У меня есть форма, которая добавляет список к новому элементу и, следовательно, нарушает последовательность бесконечного прокрутки, т. Е. Последний элемент в отображаемом контенте повторяется.

Буду признателен, если кто-нибудь может посоветовать мне, как справиться с этим состоянием. Вещи, которые я пытался сделать,

1. Склеивание последнего элемента в уже отображаемом контенте. (неопределенный путь, не будет полезен, если список добавлен с несколькими элементами)
2. Отслеживание количества элементов и добавление аргумента skip = <number_of_prepended_items> к серверу для пропуска этих новых добавленных элементов (отлично работает, но я чувствую, что он сломается)
3. Перезагрузка первых 10 предметов при добавлении нового товара.

Любые предложения?

Answer 1

Каждый элемент может иметь некоторое значение, которое обозначает порядок. Когда добавляется больше предметов, порядок увеличивается. Ваш бесконечный прокрутка может уменьшить уменьшение порядка количества элементов, полученных каждый раз. Например:

[ { order: 12, title: "something", body: "...text..." }, { order: 11, title: "whatever", [...snip...] } ]

Когда новый элемент будет добавлен, он будет иметь порядок 13.

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

Обратите внимание: я собирался сказать «id» вместо заказа, но я не знаю, какого типа вы используете.

Answer 2

Как сказал Гарри Пэконен, вы можете, например, дать каждому элементу значение id, которое вы увеличиваете на единицу для каждого нового элемента. Затем вы можете запросить первые 10 элементов после определенного идентификатора с сервера, который в вашем случае является самым низким идентификатором на странице (буквально). Это даст вам первые 10 предметов, которые у вас нет, и не допускайте дубликатов.