Показать изображение с помощью setTimeout и для l oop в массиве

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)
    }
}

EDIT :

Я меняю свой метод на:

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

Добавьте элемент img в html и измените его атрибут src, используя javascript.

Чтобы отображать изображения по порядку, вы можете использовать функцию генератора.

1. Создайте функцию генератора, которая генерирует объект изображения после указанного c количества времени.

2. Создайте другую функцию, которая вызывает эту функцию генератора для получения объекта изображения, получает значение свойства img из возвращенного объекта изображения и устанавливает его как значение атрибута src в элементе img.

   Эта функция также создает тайм-аут, который истекает через время, равное 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

Первый: измените : в первой строке на =, заменить последний , на ;, и удалите , после последнего объекта в массиве.

Во-вторых, попробуйте этот код:

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 3

Пожалуйста, посмотрите код ниже, у меня он работает:

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 4

сделайте что-то подобное с помощью функции обещания:

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