Question

我有一个像这样的帖子列表：

<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>

我想使用setInterval()每30秒更新一次时间戳（很像facebook时间戳）。

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（）？

Answer 1

如果你想只在“时间之前”展示，为什么要使用ajax呢？只需使用此插件timeago

即可

Answer 2

这不是你问题的真正答案，但......另一种方法是，你可以避免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);

Answer 3

你的ajax函数没有任何内在错误。您只是致电setInterval错误：

setInterval(update_timestamps, 30000);

（注意对update_timestamps的函数引用，而不是函数调用）

如果你认真思考，你会自己意识到为什么你所做的不起作用（提示：你将undefined传递给setInterval。

Answer 4

来自fine manual：

<强>上下文
此对象将成为所有与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属性和返回数据中的id-to-timestamp映射。或者只是放弃AJAX并听取naveen。

使用setInterval（）每30秒更新一次时间戳

4 个答案: