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

Я пытаюсь отображать по одному элементу за раз. Они берутся из файла 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, не изменит задержку, с которой вы его создали.

— 13.09.2018 19:19

javascript jquery html json

13.09.2018 19:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(data.PlaylistItems[i].FileName);
        i++;
        if (i < data.PlaylistItems.length) DisplayMessages(i);
    }, data.PlaylistItems[i].Milliseconds);
}

DisplayMessages(0);

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

— 17.09.2018 11:33

13.09.2018 19:24

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

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

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

— 17.09.2018 11:34

13.09.2018 19:27