Почему мои вложенные SetTimeouts не работают с Internet Explorer 11? - PullRequest
Новая
       12

Почему мои вложенные SetTimeouts не работают с Internet Explorer 11?

0 голосов
/ 27 сентября 2019

В настоящее время у меня есть код, который выглядит примерно так: 

import React from 'react';
import testimonials from './testimonials';
import {INTERVAL, FADE_OUT_ANIMATION_TIME, FADE_IN_ANIMATION_TIME} from './config';

class Carousel extends React.PureComponent {
  constructor(props) {
    super(props);
    this.startCarousel = this.startCarousel.bind(this);
    this.currentIdx = 0;
  }

  startCarousel = () => {
    this.intervalID = setInterval(() => {
      const {currentIdx, carouselContainer} = this;
      const testimonials = carouselContainer.children;
      const nextIdx = currentIdx + 1 !== testimonials.length ? currentIdx + 1 : 0;

      testimonials[currentIdx].classList.add('fadeOut');
      setTimeout(() => {
        testimonials[currentIdx].classList.add('hide');
        testimonials[currentIdx].classList.remove('fadeOut');

        testimonials[nextIdx].classList.remove('hide');
        testimonials[nextIdx].classList.add('fadeIn');
        setTimeout(() => testimonials[nextIdx].classList.remove('fadeIn'), FADE_IN_ANIMATION_TIME);
      }, FADE_OUT_ANIMATION_TIME);

      this.currentIdx = nextIdx;
    }, INTERVAL);
  }

  componentDidMount() {
    this.startCarousel();
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  render() {
    return (
      <div className="Carousel__container" ref={(ele) => this.carouselContainer = ele} >
        {testimonials.map(renderTestimonials)}
      </div>
    );
  }
}

export default Carousel;

Все, что я делаю, - это циклический просмотр различных элементов, визуализируемых внутри моего контейнера с каруселью, изменение имен классов вокруг каждого интервала для запуска анимации искрыть / показать элементы.Интервал и время ожидания для справки: 

export const INTERVAL = 8500;
export const FADE_OUT_ANIMATION_TIME = 800;
export const FADE_IN_ANIMATION_TIME = 1200;

Это работает в Chrome, Safari, Firefox, Edge, но не в Internet Explorer 11. Карусель никогда не зацикливается на первом элементе.Из того, что я могу сказать, похоже, что это не проблема CSS, поскольку анимации правильно запускаются и анимируются, когда я вручную добавляю соответствующие имена классов в консоли разработчика.Методы [DOMElement].classList.add/remove, похоже, тоже хорошо работают.Я попытался вручную воссоздать вышеупомянутый setInterval код в консоли IE11, и кажется, что может быть проблема с вложенными setTimeout s в setInterval?

. Из того, что я заметил, похоже, чтоfadeIn имя класса добавлялось правильно, но имя класса hide не удалялось, за исключением случаев, когда оно возвращалось к самому первому элементу в контейнере.

Кто-нибудь имеет представление о том, что здесь может происходить?Любой совет, как я мог бы сделать эту работу, как задумано?

1 Ответ

0 голосов
/ 27 сентября 2019

Я думаю, что проблема связана с настройкой значения currentIdx. Пожалуйста, обратитесь к следующему коду, он хорошо работает на моей стороне: 

export const INTERVAL = 8500;
export const FADE_OUT_ANIMATION_TIME = 800;
export const FADE_IN_ANIMATION_TIME = 1200;
var currentIdx =0;

  class Carousel extends React.PureComponent {
    constructor(props) {
      super(props); 
    }

    startCarousel = () => {
      this.intervalID = setInterval(() => { 
        const testimonials = document.getElementsByClassName("imagecontent");
        const nextIdx = currentIdx + 1 !== testimonials.length ? currentIdx + 1 : 0;

        testimonials[currentIdx].classList.add('fadeOut');
        setTimeout(function () {
          testimonials[currentIdx].classList.add('hide');
          testimonials[currentIdx].classList.add('fadeOut');

          testimonials[nextIdx].classList.remove('hide');
          testimonials[nextIdx].classList.add('fadeIn');
          setTimeout(function () {
              console.log("nested settimeout");
              return testimonials[nextIdx].classList.remove('fadeIn');
          }, FADE_IN_ANIMATION_TIME);
          currentIdx =  currentIdx + 1 !== testimonials.length ? currentIdx + 1 : 0;
      }, FADE_OUT_ANIMATION_TIME);
      }, INTERVAL);
    }

    render() {
      return (
        <div >
            <input type="button" value="Start Carousel" onClick={ this.startCarousel} />
            <br />
          <div className="imagecontent image1">
          </div>
          <div className="imagecontent hide image2">
          </div>
          <div className="imagecontent hide image3">
          </div>
        </div>
      );
    }
  }

Результат, как показано ниже:

enter image description here

...