使用 setInterval() 每 30 秒更新一次时间戳

发布于 2024-11-29 22:57:40 字数 889 浏览 1 评论 0原文

我有一个帖子列表,如下所示:

<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() ?

I have a list of posts like so:

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

I want to update the timestamp every 30 seconds (much like facebook timestamps) using 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);

Obviously something is wrong with my .ajax() function, or maybe I shouldn't use ajax() at all?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

篱下浅笙歌 2024-12-06 22:57:40

如果你只想显示“前段时间”为什么要使用ajax?
只需使用这个插件,timeago

If you want to show only "time ago" why use ajax at all?
Just use this plugin, timeago

年少掌心 2024-12-06 22:57:40

这并不是您问题的真正答案,但是...另一种选择,这意味着您可以一起避免 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 /

然后通过updateDateTimestampssetInterval

setInterval(updateDateTimestamps, 30000);

This isn't really an answer to your question but... an alternative, that would mean you could avoid the ajax calls all together, would be to add the timestamp to the attribute, something like:

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

Then you would process your timestamps client side:

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

For an implementation of prettyDate see http://ejohn.org/blog/javascript-pretty-date/

Then pass updateDateTimestamps to setInterval:

setInterval(updateDateTimestamps, 30000);
岛徒 2024-12-06 22:57:40

你的 ajax 函数本身并没有什么问题。你只是错误地调用了setInterval:(

setInterval(update_timestamps, 30000);

注意对update_timestamps的函数引用,而不是函数调用)

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

Nothing is inherently wrong with your ajax function. You're just calling setInterval wrong:

setInterval(update_timestamps, 30000);

(notice the function reference to update_timestamps, not function call)

If you think hard, you will realize for yourself why what you did didn't work (hint: you're passing undefined to setInterval).

苏大泽ㄣ 2024-12-06 22:57:40

来自 精细手册

上下文
该对象将成为所有 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 匹配回调中的多个内容的问题,因此您需要调整整个方法(即 .timestamp 元素上的 id 属性以及返回数据中的 id 到时间戳映射)。或者干脆放弃 AJAX 并听听 naveen 的意见。

From the fine manual:

context
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).

So your this in the success callback is, essentially, just the AJAX options. So either specify the right context option to get the this you're expecting or use an explicit selector:

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

You probably want to add an error callback to restart your timer if there was an error. Or use the complete callback for that:

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

Even with all that you still have a problem with .timestamp matching multiple things in your callbacks so you'll need to adjust your whole approach (i.e. id attributes on the .timestamp elements and an id-to-timestamp mapping in the returned data). Or just ditch the AJAX and listen to naveen.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文