为什么我的嵌套 SetTimeouts 不适用于 Internet Explorer 11？答案

【问题标题】：Why aren't my nested SetTimeouts working with Internet Explorer 11?为什么我的嵌套 SetTimeouts 不适用于 Internet Explorer 11？
【发布时间】：2019-09-26 22:11:11
【问题描述】：

我目前的代码如下所示：

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 方法似乎也可以正常工作。我尝试在 IE11 控制台中手动重新创建上述setInterval 代码，似乎setInterval 中的嵌套setTimeouts 可能存在问题？

据我观察，fadeIn 类名似乎已正确添加，但 hide 类名并未被删除，除非它循环回到容器中的第一个元素。

有人知道这里会发生什么吗？关于如何按预期完成这项工作的任何建议？

【问题讨论】：

标签： javascript reactjs internet-explorer-11 settimeout setinterval

【解决方案1】：

我认为问题与 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>
      );
    }
  }

结果如下：

【讨论】：