Перебирайте элементы фида JSON с заданным интервалом и заменяйте предыдущий элемент

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

Принятый ответ на вопрос не соответствует тому, что на самом деле попросил пользователь.Вот мой путь, который делает.Там обновленная скрипка здесь

$.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 3

Если вы получаете комментарии каждые 3 секунды, я бы попытался добавить к div. У комментария div должен быть отличительный идентификатор. Этот идентификатор может быть идентификатором комментария.

Возможно, вам потребуется найти идентификатор последнего обработанного вами комментария. Либо вы можете хранить в скрытом поле, либо в какой-нибудь глобальной переменной.

Получив новый комментарий, вы добавляете новый. Затем вы скрываете комментарий, который обрабатывали последним.

Это должно быть просто.

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