Question

请我需要一些帮助来修复此ajax代码。

我需要使用js脚本读取json tha，它定义了播放时间和播放文件。

[
{"time": 3000,"file":"./media/pic1.jpg"},
{"time": 4000,"file":"./media/demo.mp4"},
{"time": 18000,"file":"./media/pic6.jpg"},
{"time": 7000,"file":"./media/pic2.jpg"}
]

我的js文件是这个。

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', './json/display1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var numeroMedia =  ourData.length;
var currentIndex = 0;


function doSetTimeout(i) {
    var timeSleep = ourData[i].time;
    var fileName = ourData[i].file;
    console.log(timeSleep);
    console.log(fileName);
    setTimeout(function() { var idFile = document.getElementById('myImage');
        idFile.src = fileName; }, timeSleep);

}

for (var i = 0; i <= numeroMedia; ++i)
doSetTimeout(i);


};

ourRequest.send();

我的想法是读取项目数量并为json（numeroMedia）中的媒体数量创建一个循环，此循环调用一个函数doSetTimeout（），该函数传递要显示的项目数量。

在函数中，我从json解析中定义了2个变量timeSleep和fileName。

我在控制台上的输出是正确的。

3000 my.js:13:6
./media/pic1.jpg my.js:14:9
4000 my.js:13:6
./media/demo.mp4 my.js:14:9
18000 my.js:13:6
./media/pic6.jpg my.js:14:9
7000 my.js:13:6
./media/pic2.jpg

但是脚本有3个缺陷

脚本未等待定义的时间它循环通过数组，而无需等待时间变量。
当脚本完成循环时，它必须重新加载/解析json 文件，然后重新开始。
如果媒体文件是视频，则必须将视频输出为全屏显示，如果它是图像，则必须输出全屏显示图像。

请有人帮我修复此脚本，这是我的第一个Ajax脚本。

谢谢大家。

循环播放json文件并在页面上显示内容

0 个答案: