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

Question

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)我有价值：

3000
3500
4000
5000

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

Answer 1

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

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

1. 创建一个生成器函数，在特定时间后生成一个图像对象。

2. 创建另一个调用此生成器函数以获取图像对象的函数，从返回的图像对象中获取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=""/>

Answer 2

请看下面的代码，它对我有用：

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

Answer 3

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

其次，试试这个代码：

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

Answer 4

使用 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="" />