Javascript 如何一次显示一个元素？

我试图一次显示一个元素。它们来自一个JSON文件。我正在使用JQuery和setInterval。但是图像应该根据文件的“毫秒”变化

我做错了什么？ 我的实现基于

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

---

非常感谢您的帮助。

因为您有不同的毫秒值setInterval不是最佳选择。在这种情况下，我建议使用setTimeout和递归方法

var数据={
“名称”：“2”，
“播放项目”：[
{
“文件名”：“ad1.png”，
“持续时间”：“00:00:23”，
“毫秒”：1300.0
},
{
“文件名”：“ad2.jpg”，
“持续时间”：“00:00:00”，
“毫秒”：2500.0
},
{
“文件名”：“ad3.png”，
“持续时间”：“00:00:00”，
“毫秒”：5400.0
}
]
};
功能显示消息（i）{
设置超时（（）=>{
console.log（data.playlitems[i].FileName）；
i++；
如果（i显示消息（0）；

，因为您有不同的毫秒值。setInterval不是最佳选择。在这种情况下，我建议使用setTimeout和递归方法

var数据={
“名称”：“2”，
“播放项目”：[
{
“文件名”：“ad1.png”，
“持续时间”：“00:00:23”，
“毫秒”：1300.0
},
{
“文件名”：“ad2.jpg”，
“持续时间”：“00:00:00”，
“毫秒”：2500.0
},
{
“文件名”：“ad3.png”，
“持续时间”：“00:00:00”，
“毫秒”：5400.0
}
]
};
功能显示消息（i）{
设置超时（（）=>{
console.log（data.playlitems[i].FileName）；
i++；
如果（iDisplayMessages（0）；

我建议使用超时在数组上执行递归循环

函数DisplayMessages（）{
$.getJSON（屏幕设置surl，（数据）=>{
var i=0；
如果（数据！=null）{
函数displayNextItem（）{
//显示当前图像
css（“背景图像”，“url（./media/“+data.playlitems[i].FileName+”））；
css（“背景重复”，“不重复”）；
//将i前进到下一个图像，如果到达末尾，则返回0
//阵列的
i=++i%data.playlitems.length；
//启动下一个元素的循环，并将其设置为超时
setTimeout（displayNextImage，data.playlitems[i].毫秒）；
}
//在第一个元素上启动循环，并使其超时
setTimeout（displayNextImage，data.playlitems[i].毫秒）；
}
});
}
DisplayMessages（）；

我建议使用超时在数组上执行递归循环

函数DisplayMessages（）{
$.getJSON（屏幕设置surl，（数据）=>{
var i=0；
如果（数据！=null）{
函数displayNextItem（）{
//显示当前图像
css（“背景图像”，“url（./media/“+data.playlitems[i].FileName+”））；
css（“背景重复”，“不重复”）；
//将i前进到下一个图像，如果到达末尾，则返回0
//阵列的
i=++i%data.playlitems.length；
//启动下一个元素的循环，并将其设置为超时
setTimeout（displayNextImage，data.playlitems[i].毫秒）；
}
//在第一个元素上启动循环，并使其超时
setTimeout（displayNextImage，data.playlitems[i].毫秒）；
}
});
}
DisplayMessages（）；

数据。PlayItems[i]。毫秒

从不重复。您正在创建一个间隔，您对

i

变量所做的任何更改都不会更改您使用

数据创建它的延迟。PlayItems[i].毫秒

从不重复。您正在创建一个间隔，您对

i

变量所做的任何更改都不会改变您创建它的延迟。感谢您的建议和解决方案。感谢您的建议和解决方案。感谢您的建议和解决方案。感谢您的建议和解决方案激动。