предотвращение дублирования бесконечной прокрутки ajax loader - PullRequest
Новая
       1

предотвращение дублирования бесконечной прокрутки ajax loader

6 голосов
/ 05 января 2012

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

сайт, над которым я работаюимеет длинный список сообщений пользователя.у меня есть все обработчики событий прокрутки, работающие на ajax в следующем пакете из 100 сообщений, когда вы достигнете или приблизитесь ко дну.

мой вопрос ... Как мне предотвратить следующий сценарий?

  1. UserX посещает сайт и загружает сообщения 1-100
  2. Еще 10 пользователей посещают сайт и добавляют еще 10 сообщений
  3. UserX прокручивает вниз изагружает сообщения 101-200, которые раньше были сообщениями 91-190
  4. UserX заканчивается дубликатами сообщений 91-100 на странице

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

$.ajax({
    type:'POST',
    url:"/userposts.php",
    data:{ limit: postCount },
    success:function(data) {
        $("postsContainer").append(data);
        if ( $("postsContainer").find("div[id='lastPostReached']") ) {
            // unbind infinite scrolling event handlers
        }
    },
    dataType:'html'
});

в моем PHP-скрипте. По сути, у меня есть следующее: 

if ( ! isset($_POST["limit"]) ) {
    $sql .= " LIMIT 101"; // initial request
} else {
    $sql .= " LIMIT {$_POST["limit"]},101
}

$posts = mysql_query($sql);
while( $post = mysql_fetch_assoc($posts) ) {
    /* output formatted posts */
}

// inform callback handler to disable infinite scrolling
if ( mysql_num_rows($posts) < 101 ) {
    echo '<div id="lastPostReached"></div>';
}

Это дает мне бесконечную прокрутку, приятную и легкую1025 * но как я могу предотвратить гипотетические дубликаты, которые будут отображаться при добавлении новых записей в таблицу между запросами ajax?

Ответы [ 3 ]

9 голосов
/ 05 января 2012

Вы определяете временную метку из php, которая указывает время сервера в момент загрузки страницы (например, var _loadTime = <?php echo time(); ?>), а затем передаете это значение как часть объекта конфигурации данных Ajax вместе с лимитом.

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

Вы также можете пойти еще дальше и использовать это время вместе с базовой техникой длинных опросов ajax, чтобы уведомлять пользователя о новых сообщениях с момента загрузки страницы / последней загрузки новых сообщений - аналогично каналам Facebook и Twitters.

2 голосов
/ 05 января 2012

Обновите ваш ajax-запрос, чтобы в дополнение к параметру limit вы проходили через текущий диапазон идентификаторов сообщений (я предполагаю, что сообщения имеют какой-то уникальный идентификатор).Обновите свой php, чтобы учесть эти параметры при получении следующего набора сообщений.

То есть вместо того, чтобы сказать "дай мне еще 100", запрос "дай мне 100, начиная с идентификатора x".

(Извините, у меня нет времени сейчас написать пример кода для этого.)

0 голосов
/ 05 января 2012

Просто используйте уникальный идентификатор для сообщений и считайте в обратном направлении.

При первом посещении пользователь запрашивает сообщения 603-503

Десять пользователей попадают на страницу и добавляют комментарии, поэтому самый высокий комментарийсейчас 613

Пользователь прокручивает вниз и запрашивает 503-403

Проблема решена?:)

...