Как получить индекс 0 при умножении числа в интервале React.js

Question

Я пытаюсь начать, если оператор с номера 0, когда окно загружено, но он игнорирует 0 и начиная с 1, может кто-нибудь, пожалуйста, помогите мне понять, как это работает.

 showAnime = () => {
    let counter = 0;
    setInterval(() => {
      counter++;
      if (counter === 0) {
        console.log(counter);
        // when window is loaded this condition should start first
        this.setState({
          animateRightOne: "animated fadeInRightBig delay-one"
        });
      } else if (counter === 1) {
        console.log(counter);
        this.setState({
          animateRightTwo: "animated fadeInRightBig delay-two"
        });
      } else if (counter === 2) {
        console.log(counter);
        this.setState({
          animateRightThree: "animated fadeInRightBig delay-three"
        });
      } else if (counter === 3) {
        console.log(counter);
        this.setState({
          animateLeftFour: "animated fadeInLeftBig delay-four"
        });
      } else if (counter === 4) {
        console.log(counter);
        this.setState({
          animateRightFive: "animated fadeInRightBig delay-five"
        });
      } else if (counter === 5) {
        console.log(counter);
        this.setState({
          animateRightSix: "animated fadeInRightBig delay-six"
        });
      } else if (counter === 6) {
        counter = 0;
      }
    }, 7000);
  };

Answer 1

Просто поместите counter++ в конец вашей функции:

showAnime = () => {
    let counter = 0;
    setInterval(() => {
        /* */
        } else if (counter === 5) {
            console.log(counter);
            this.setState({
                animateRightSix: "animated fadeInRightBig delay-six"
            });
        } else if (counter === 6) {
            counter = 0;
        }
        counter++;
    }, 7000);
};

Вы можете значительно сократить свой код, сохранив каждое предложение в массиве, а затем выбрав из него текущее предложение.

И, чтобы автоматически переключаться между предложениями, вы можете использовать модуль % вместо установки счетчика на 0:

showAnime = () => {
    let counter = 0;
    setInterval(() => {
        const sentences = [
            "animated fadeInRightBig delay-one",
            "animated fadeInRightBig delay-two",
            "animated fadeInLeftBig delay-three",
            "animated fadeInRightBig delay-five",
            "animated fadeInRightBig delay-six"
        ]

        this.setState({
            animateRightOne: sentences[counter % 6]
        });

        counter++;
    }, 7000);
};

Еще короче:

showAnime = () => {
    let counter = 0;
    setInterval(() => {
        const sentences = [["one", 'Right'], ["two", 'Right'], ["three", 'Left'], ["five", 'Right'], ["six", 'Right'] ]

        const [num, side] = sentences[counter % 6]

        this.setState({
            animateRightOne: `animated fadeIn${side}Big delay-${num}`
        });

        counter++;
    }, 7000);
};