在数组中使用 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) 我有价值：

但仍然无法正常工作，第一张图片应该会立即出现并显示 3 秒。现在在 3 秒后出现

Answer 1

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

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

在 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=""/>

Answer 4

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

其次，试试这个代码：

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

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

Show image using setTimeout and for loop in array

javascript

for-loop

settimeout