title: How to animate a component with two differents intervals in js
body: <p>I need to animate a mouth on a component named character.
  What I want to do is to use state named openned to handle my mouth state.</p>
  
  <p>I need the mouth animation to run every 2 seconds to allow the character to speak with interval. The idea is to display text bellow, and the mouth has to moove only when the text appear. </p>
  
  <pre><code> state = {
  openned : false
   }
  
    handleMouthState = () =&gt; {
  this.setState({
    openned : ! this.state.openned
  });
    }
  
    animeMouth = () =&gt; {
  setInterval(this.handleMouthState.bind(this), 100);
    }
  
    animMouthWithInterval = () =&gt; {
  setInterval( this.animeMouth.bind(this), 2000 );
    }
  
    componentDidMount() {
    setTimeout( this.animMouthWithInterval.bind(this) , 6000);
    }
  </code></pre>
  
  <p>here is the code i've tried, it works well except that the animMouth func continue to run even if it's called with 2 sec interval, I except to stop animation then reload it</p>