Реагировать на бесконечное слайд-шоу - PullRequest
Новая
       14

Реагировать на бесконечное слайд-шоу

0 голосов
/ 05 мая 2018

Я пытаюсь создать бесконечное слайд-шоу в React. Существует множество пакетов, которые помогают разработчикам создавать слайд-шоу, но я бы хотел сделать это сам.

Вот код, который я пробовал: 

    changeImage() {
    this.props.adverts.advertImages.map((img,i) => {
    setInterval(() => {
      this.setState({bg: img.imgSrc})
    }, 3000*(i+1));
    });
  }

Я вызываю это, возвращая div вот так {this.changeImage()}

На элементе у меня style={{backgroundImage: "url("+this.state.bg+")"}}

В начале это медленно, несколько секунд спустя, это быстро ..

1 Ответ

0 голосов
/ 05 мая 2018

Вы делаете это неправильно. Что происходит, если ваш цикл запускается и создает экземпляр x setInterval (на основе длины массива), таким образом, у вас есть array.length количество запущенных setIntervals, что не очень хорошо.

Что вы хотите сделать, это следующее:

Вы хотите отобразить изображение через определенное количество времени (3 с) 

    let index = 0;
    setInterval(() => {
      this.setState({
        bg: this.props.adverts.advertImages[index++].imgSrc
      })
      if (index === this.props.adverts.advertImages.length) index = 0;
    }, 3000);

Если вы хотите добавить дополнительную логику, скажем, увеличивать интервал таймера (замедлять анимацию) после каждого тика, то вы можете добавить индексы к 3000

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

componentDidMount(){
 let index = 0;
    setInterval(() => {
      this.setState({
        bg: this.props.adverts.advertImages[index++].imgSrc
      })
      if (index === this.props.adverts.advertImages.length) index = 0
    }, 3000);
}

  render() {
    return (<div>
      <Advertisement 
      style={{ backgroundImage: "url("+this.state.bg+")" }} centered unit='billboard' test='Billboard' />
    </div>);
  }
}
...