AJAX:使用 jQuery 每 X 秒下载一次新内容

我有帖子的页面。最初帖子是由服务器端代码添加的。我需要每 60 秒从服务器下载并显示新帖子。

服务器可以返回 0 到 N 个帖子。服务器返回的页面对于两个帖子具有以下格式（最新的在顶部）：

<div class='post' data-id='456'>...</div>
<div class='post' data-id='123'>...</div>

有我的代码：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    var lastPostID;
    $(document).ready(function(){
            var j = jQuery.noConflict();
            j(document).ready(function() {              
              setInterval(function(i) {
                lastPostID = j(".post div:last").data("id");
                console.log(lastPostID, "lastPostID");
                j.ajax({
                  url: "/post/"+lastPostID,
                  cache: false,
                  success: function(html){
                    j("#temp").html(html);
                    j('#temp').prependTo("#posts");
                    j("#temp").empty();
                  }
                })
              }, 10000)
                });
    });    
    </script>
  </head>
    <body>
        <div id="temp" style="display: none;"></div> 
        <div id="posts">
            <div class='post' data-id='100'>...</div>
            <div class='post' data-id='20'>...</div>
            <div class='post' data-id='1'>...</div>         
        </div>
    </body>
</html>

你能推荐我任何好的jQuery计时器插件吗？

我每 10 秒在 JS 控制台上看到一次：

null "lastPostID"

我在哪里有错误？

更新：

如果我使用：

<script>
var divs = document.getElementsByClassName('post');
console.log(divs.length, "divs with class *post*");
for(var i=0; i<divs.length; i++) { 
    var id = divs[i].getAttribute('data-id');
    console.log(id, "lastPostID");
}
</script>

输出正常：

3 "divs with class *post*" jQuery_div_update.html:37
100 lastPostID jQuery_div_update.html:40
20 lastPostID jQuery_div_update.html:40
1 lastPostID

但是对于jQuery：

<script>
$(document).ready(function(){
  var lastPostID = $(".post div:last").data("id");
  console.log(lastPostID, "lastPostID");
});     
</script>

输出不好：

null "lastPostID"

为什么？

如果要轮询某些外部资源（例如，使用 AJAX 调用），可以遵循"递归 setTimeout 模式"（从 https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval 开始）。例：

(function loop(){
  setTimeout(function(){
    // logic here
    // recurse
    loop();
  }, 1000);
})();

使用 setInterval（）而不是 setTimeout（）

像这样：

setInterval(function(){
    $.ajax({
      url: "test.html",
      context: document.body
    }).done(function() {
      //do something
    });
},1000*60);

http://www.w3schools.com/jsref/met_win_setinterval.asp

https://api.jquery.com/jQuery.ajax/

相关内容

最新更新

热门标签：