Обновляйте временные метки каждые 30 секунд, используя setInterval () - PullRequest
Новая
       0

Обновляйте временные метки каждые 30 секунд, используя setInterval ()

0 голосов
/ 18 августа 2011

У меня есть список таких сообщений: 

<ul>
    <li>
       <p class="post" id="432">This is a post</p>
       <p class="timestamp">5 minutes ago</p>
    </li>
    <li>
       <p class="post" id="589">This is another post on the site</p>
       <p class="timestamp">1 hour ago</p>
    </li>
</ul>

Я хочу обновлять отметку времени каждые 30 секунд (так же, как отметки времени в Facebook), используя setInterval(). 

function update_timestamps(){


    $('.timestamp').ajax({
        type    : 'POST', 
        url     : '/ajax/refresh_timestamp', 
        data    : { 'post_id' : $(this).closest('li').find('p.post').attr('id') },          
        success : function(data){ 
            $(this).html(data);
        }
    });

}

setInterval(update_timestamps(), 30000);

Очевидно, что с моей функцией .ajax () что-то не так, или, может быть, мне вообще не следует использовать ajax ()?

Ответы [ 4 ]

6 голосов
/ 18 августа 2011

Если вы хотите показать только «время назад», зачем вообще использовать ajax?
Просто используйте этот плагин, timeago

2 голосов
/ 18 августа 2011

Нет ничего плохого в вашей функции ajax. Вы просто звоните setInterval неправильно: 

setInterval(update_timestamps, 30000);

(обратите внимание на ссылку на функцию update_timestamps, а не на вызов функции)

Если вы усердно думаете, вы сами поймете, почему то, что вы не сработали (подсказка: вы передаете undefined в setInterval).

2 голосов
/ 18 августа 2011

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

<ul>
  <li>
    <p class="post" id="432">This is a post</p>
    <p class="timestamp" data-timestamp="1313649170147">5 minutes ago</p>
  </li>
  <li>
    <p class="post" id="589">This is another post on the site</p>
    <p class="timestamp" data-timestamp="1313649189299">1 hour ago</p>
  </li>
</ul>

Затем вы обработаете свои временные метки на стороне клиента: 

function updateDateTimestamps() {
  $('.timestamp').each(function(i, t) {
    var $t = $(t);
    $t.text(prettyDate($t.data('timestamp')));
  });
}

Для реализации prettyDate см. http://ejohn.org/blog/javascript-pretty-date/

Затем передайте updateDateTimestamps в setInterval: 

setInterval(updateDateTimestamps, 30000);
1 голос
/ 18 августа 2011

Из тонкого руководства :

context
Этот объект станет контекстом всех обратных вызовов, связанных с Ajax.По умолчанию контекст представляет собой объект, представляющий параметры ajax, используемые в вызове ($.ajaxSettings объединены с параметрами, переданными $.ajax).

Таким образом, ваш this в обратном вызове успехаПо сути, это просто параметры AJAX.Так что либо укажите правильную опцию context, чтобы получить ожидаемый this, либо используйте явный селектор: 

success : function(data){ 
    $('.timestamp').html(data);
    setTimeout(update_timestamps, 30000);
}

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

success: function(data) {
    $('.timestamp').html(data);
},
complete: function() {
    setTimeout(update_timestamps, 30000);
}

Даже при том, что у вас все еще есть проблема с .timestamp сопоставлением нескольких вещей в ваших обратных вызовах, поэтому вам нужно будет настроить весь подход (т. Е.id атрибуты для элементов .timestamp и отображение идентификатора в метку времени в возвращаемых данных).Или просто брось AJAX и послушай Навина.

...