按设定的时间间隔循环遍历 JSON feed 项目并替换上一个项目

Question

我编写了一些 jQuery 来从 JSON 请求获取每个项目并插入到 HTML 表中，这只插入一次。我希望能够隐藏前一项，并在连续循环中一次插入 JSON 请求中的下一项，例如每 3 秒一次。我尝试过循环，但无法让它工作，所以只是寻求一些帮助！

到目前为止我所拥有的： http://jsfiddle.net/saffad/tZxKr/1/

JSON 请求如下所示：

{
    "results": [
        {
             "member_photo": {
                 "thumb_link": "foo.jpeg"
             },
             "member_name": "Daniel",
             "comment": "this is cool"
        },
        {
             "member_photo": {
                "thumb_link": "blah.jpeg"
             },
             "member_name": "John",
             "comment": "hello everyone"
        },
        ....
  ]
}

Answer 1

只需执行以下操作：

编辑：现在它会连续循环。

function displayComments(data) {
    window.nAux = data.results.length;
    $.each(data.results, function(i,item) {
        (new Image()).src = item.member_photo.thumb_link; //Preload image (optional)
        setTimeout(function(){
            $(".comments").hide();
            $(".comments").find("img.thumb").attr('src', item.member_photo.thumb_link);
            $(".comments").find("td.comment").text(item.comment);
            $(".comments").find("td.name").text(item.member_name);
            $('.comments').fadeIn('slow');
            if(--window.nAux == 0) //If cycle ended...
               setTimeout(function(){ displayComments(data); }, 6000); //Start again in 6 seconds
        }, 6000*i); //Wait 6 seconds

    });
}

我在你的 jsfiddle 中测试了它并且运行正常:)

希望这有帮助。干杯

Answer 2

如果你每 3 秒收到一条评论，我会尝试附加到一个 div 中。
评论div需要有一个区分id。该 id 可以是评论的 id。

您可能需要查找您处理的最后一条评论的 ID。
您可以存储在隐藏字段或某些全局变量中。

一旦您有新评论，您就可以追加新评论。
然后隐藏最后处理的评论。

这应该很简单。

Answer 3

该问题的接受答案并未满足用户实际要求。这是我的做法。更新的小提琴在这里

$.getJSON("http://api.meetup.com/2/event_comments.json/?key=4b247e365978741497368536d603830&sign=true&event_id=16827758&fields=member_photo&callback=?", displayComments);

function displayComments(data) {

    var results = data.results,
        iterator = function (array, number) {
            // This function allows you to iterated through an
            // returning the next item(s) the count determined by the             // given number from the array.
            var current = 0,
            length = array.length;

            return function () {
                end = current + number;
                var part = array.slice(current, end);
                if (end > length) {
                    end = end % length;
                    part = part.concat(array.slice(0, end));
                }
                current = end;
                return part;
            };
        },
        // Get the first commment.
        next = iterator(results,1),
        firstRun = true,
        speed = 5000,

        loadComment = function(){
        // Load the comments one by one.
            var item = next()[0],
                $commentContainer = $(".comments");
            buildComment = function(){

                $commentContainer.find("img.thumb").attr('src', item.member_photo.thumb_link);
                $commentContainer.find("td.comment").text(item.comment);
                $commentContainer.find("td.name").text(item.member_name);

                $commentContainer.fadeIn('slow');

            };
            // hide the container and populate/show on callback.
            $commentContainer.fadeOut("slow", null, buildComment);

            // Set interval after first run.
            if (firstRun){
               firstRun = false;
               setInterval(loadComment,speed);   
            }
        };

       // Load the first comment.
       loadComment();
}

Answer 4

var results = what_you_said_above;
var idx = -1;
function rotateThingy(){
  if (++idx == results.length)
    idx = 0;
  document.getElementById('yourElemId').innerHTML = results[idx].member_name;
}
setInterval('rotateThingy', 3000);