Как я могу отображать элементы по одному?

Я пытаюсь отображать по одному элементу за раз. Они берутся из файла JSON. Я использую JQuery и setInterval. Но изображения должны меняться в зависимости от миллисекунд файла.

Что я делаю неправильно? моя реализация основана на Отображать только один элемент массива за раз (Javascript)

ФАЙЛ JSON

{
  "Name": "2",
  "PlaylistItems": [
    {
       "FileName": "ad1.png",
       "Duration": "00:00:23",
       "Milliseconds": 1300.0
    },
    {
       "FileName": "ad2.jpg",
       "Duration": "00:00:00",
       "Milliseconds": 25000.0
    },
    {
       "FileName": "ad3.png",
       "Duration": "00:00:00",
       "Milliseconds": 5400.0
    }

  ]
}

Javascript

function DisplayMessages() {

    $.getJSON(screenSettingsUrl, (data) => {
      if (data != null) {

      var i = 0;


    setInterval(() => {

      divName.css("background-image", "url(./media/" + data.PlaylistItems[i].FileName + ")");
      divName.css("background-repeat", "no-repeat");
      i++;

      if(i == data.PlaylistItems.length) i = 0;

    }, data.PlaylistItems[i].Milliseconds);
  }
   });
}
 DisplayMessages();

Любая помощь очень ценится.

data.PlaylistItems[i].Milliseconds никогда не повторяется. Вы создаете один интервал, и ничего, что вы делаете для изменения переменной i, не изменит задержку, с которой вы его создали.
Taplar 13.09.2018 19:19
0
1
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку у вас разные значения Миллисекунды, setInterval - не лучший выбор. В этом случае я бы предложил setTimeout и рекурсивный подход.

var data = {
    "Name": "2",
    "PlaylistItems": [
        {
            "FileName": "ad1.png",
            "Duration": "00:00:23",
            "Milliseconds": 1300.0
        },
        {
            "FileName": "ad2.jpg",
            "Duration": "00:00:00",
            "Milliseconds": 2500.0
        },
        {
            "FileName": "ad3.png",
            "Duration": "00:00:00",
            "Milliseconds": 5400.0
        }

    ]
};

function DisplayMessages(i) {
    setTimeout(() => {
        console.log(data.PlaylistItems[i].FileName);
        i++;
        if (i < data.PlaylistItems.length) DisplayMessages(i);
    }, data.PlaylistItems[i].Milliseconds);
}

DisplayMessages(0);

Спасибо за ваше предложение и решение.

Zinox 17.09.2018 11:33

Я бы предложил использовать тайм-ауты для выполнения рекурсивного цикла в вашем массиве.

function DisplayMessages() {
  $.getJSON(screenSettingsUrl, (data) => {
    var i = 0;
    
    if (data != null) {
      function displayNextItem () {
        //show the current image
        divName.css("background-image", "url(./media/" + data.PlaylistItems[i].FileName + ")");
        divName.css("background-repeat", "no-repeat");
        //advance i to the next image, or back to 0 if it reaches the end
        //of the array
        i = ++i % data.PlaylistItems.length;
        
        //start the loop for the next element, with it's timeout
        setTimeout(displayNextImage, data.PlaylistItems[i].Milliseconds);
      }
      
      //start the loop on the first element, with it's timeout
      setTimeout(displayNextImage, data.PlaylistItems[i].Milliseconds);
    }
  });
}

DisplayMessages();

Спасибо за ваше предложение и решение.

Zinox 17.09.2018 11:34

Другие вопросы по теме