在数组中使用setTimeout和for循环显示图像

images: [
{
img: 'car_0.png',
time: 3000,
},
{
img: 'car_1.png',
time: 500,
},
{
img: 'car_2.png',
time: 500,
},
{
img: 'car_3.png',
time: 1000,
},
],

我需要在页面中显示图像。time是图像应该显示在页面上的时间。例如：

第一张照片car_0.png在页面上显示3秒钟。3秒后，它变为第二个图像，显示0.5秒。。。

我已经写了这个方法，但不起作用：

if(images !== undefined) {
for(let i = 0; i < images.length; i++) {
setTimeout(() => {
this.images = images[i].img
}, images[i].time + images[i + 1].time)
}
}

编辑：

我将我的方法更改为：

if(images !== undefined) {
let time
for(let i = 0; i < images.length; i++) {
if(i > 0) {
time = time + images[i].time
}
else {
time = images[i].time
}
console.log(time)
setTimeout(() => {
this.images = images[i].img
}, time)
}
}

现在在console.log(time)中，我有值：

但是仍然不能正常工作，第一张图片应该立即出现并显示3秒钟。3秒后出现

在html中添加img元素，并使用javascript更改其src属性。

要按顺序显示图像，可以使用生成器函数。

创建一个生成器函数，在特定时间后生成图像对象。
创建另一个函数，该函数调用此生成器函数来获取图像对象，从返回的图像对象中获取img属性的值，并将其设置为img元素上src属性的值。

此函数还创建一个超时，该超时在等于当前图像对象的time属性的时间之后过期。超时到期后，此函数将再次调用自身，从生成器函数中获取下一个图像并显示该图像。

重复这些步骤，直到没有更多的图像可显示为止。

const images = [
{ img: 'https://picsum.photos/id/0/100', time: 3000 },
{ img: 'https://picsum.photos/id/1/100', time: 500 },
{ img: 'https://picsum.photos/id/10/100', time: 500 },
{ img: 'https://picsum.photos/id/100/100', time: 1000 }
];
const img = document.querySelector('img');
function* getImage() {
for (let image of images) {
yield image;
}
}
const imageGenerator = getImage();
function showNextImage() {
const image = imageGenerator.next().value;
if (!image) return;

img.src = image.img;

setTimeout(showNextImage, image.time);
};
showNextImage();

<img src=""/>

或者，您可以使用一个变量来跟踪当前显示的图像的索引，以及使用该索引变量访问的每个图像对象，而不是使用生成器函数来获取图像对象。

const images = [
{ img: 'https://picsum.photos/id/0/100', time: 3000 },
{ img: 'https://picsum.photos/id/1/100', time: 500 },
{ img: 'https://picsum.photos/id/10/100', time: 500 },
{ img: 'https://picsum.photos/id/100/100', time: 1000 }
];
const img = document.querySelector('img');
let index = 0;
function showNextImage() {
const image = images[index++];
if (!image) return;

img.src = image.img;
setTimeout(showNextImage, image.time);
};
showNextImage();

<img src=""/>

请参阅下面的代码，它对我有效：

var images = [
{
img: 'car_0.png',
time: 3000,
},
{
img: 'car_1.png',
time: 500,
},
{
img: 'car_2.png',
time: 500,
},
{
img: 'car_3.png',
time: 1000,
},
]
var currentImage = 0;
function showImages(){

let img = images[currentImage];
console.log(img.img);
setTimeout(function () {
currentImage++;
if(currentImage<images.length){
showImages();
}
}, img.time);
};
showImages();

首先：
将第一行的:更改为=，
用;替换最后一个,，
>并从数组中最后一个对象后面删除,。

第二，试试这个代码：

function displayImage(images, i=0) {
if(images.length==0) return;
console.log(images[i].img); // replace with whatever you want to do
i++;
if(i==images.length) i=0;
setTimeout(displayImage,images[i].time,images,i);
}

呼叫：

displayImage(images);

或：

displayImage(images, 2); // if you want to start with the 3rd

使用promise函数执行类似操作：

const images = [{
img: 'https://picsum.photos/id/0/100',
time: 3000,
},
{
img: 'https://picsum.photos/id/10/100',
time: 500,
},
{
img: 'https://picsum.photos/id/100/100',
time: 500,
},
{
img: 'https://picsum.photos/id/1000/100',
time: 1000,
},
];
const waitNext = ({
time
}) => {
return new Promise(function(resolve) {
setTimeout(resolve, time);
});
}

async function displayImages(images) {
for (const image of images) {
document.getElementById('img').src = image.img;
await waitNext(image);
}
}
displayImages(images)

<img id="img" src="" />

相关内容

最新更新

热门标签：