使用 setInterval() 每 30 秒更新一次时间戳
我有一个帖子列表,如下所示:
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
如果你只想显示“前段时间”为什么要使用ajax?
只需使用这个插件,timeago
If you want to show only "time ago" why use ajax at all?
Just use this plugin, timeago
这并不是您问题的真正答案,但是...另一种选择,这意味着您可以一起避免 ajax 调用,即将时间戳添加到属性中,例如:
然后您将在客户端处理时间戳:
有关 PrettyDate 的实现,请参阅 http://ejohn.org/blog/javascript-pretty-date /
然后通过
updateDateTimestamps
到setInterval
: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:
Then you would process your timestamps client side:
For an implementation of prettyDate see http://ejohn.org/blog/javascript-pretty-date/
Then pass
updateDateTimestamps
tosetInterval
:你的 ajax 函数本身并没有什么问题。你只是错误地调用了setInterval:(
注意对update_timestamps的函数引用,而不是函数调用)
如果你认真思考,你会自己意识到为什么你所做的不起作用(提示:你'将
undefined
传递给 setInterval)。Nothing is inherently wrong with your ajax function. You're just calling
setInterval
wrong:(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).来自 精细手册:
因此,成功回调中的
this
本质上只是 AJAX 选项。因此,要么指定正确的context
选项来获取您期望的this
,要么使用显式选择器:您可能想要添加一个
error
回调如果出现错误,请重新启动计时器。或者使用complete
回调:即使如此,您仍然遇到
.timestamp
匹配回调中的多个内容的问题,因此您需要调整整个方法(即.timestamp
元素上的id
属性以及返回数据中的 id 到时间戳映射)。或者干脆放弃 AJAX 并听听 naveen 的意见。From the fine manual:
So your
this
in the success callback is, essentially, just the AJAX options. So either specify the rightcontext
option to get thethis
you're expecting or use an explicit selector:You probably want to add an
error
callback to restart your timer if there was an error. Or use thecomplete
callback for that: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.