jquery — прокрутка вниз с данными в реальном времени

Пусть пользователь решит

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

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

Чтобы справиться с этим, проще всего просто продолжить выборку с идентификатора последнего показанного пункт, как вы прокрутите вниз. Если новые данные будут добавлены к набору данных, к которому я применил, я бы предложил отобразить некоторую форму уведомление или баннер, информирующий пользователя о новом контенте, доступен, и загружайте новый контент / перезагружайте страницу только в том случае, если пользователь нажимает на него.

Причина этого заключается в том, что новые данные, созданные в то время, когда пользователь уже воздействовал на набор данных, могут не иметь отношения к тому, что пользователь делает в настоящее время. Например, если пользователь просто хочет обновить N уже отображенных записей, приложение должно просто позволить им завершить то, что они делают, вместо того, чтобы автоматически вставлять элементы в список и, возможно, возиться с текущим рабочим процессом.

Подведем итог:

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

Какой-то псевдокод для иллюстрации

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

$dataList.on('scroll', function() {

var newData = false;

if (endOfPage) {

$dataList.append(getNextInList())

newData = checkForNewData();

if (newData) {

newDataNotification();
}
}
});