Javascript 如何在js中使用两个不同的间隔设置组件动画

我需要在名为character的组件上设置嘴巴的动画。 我想做的是使用名为openned的状态来处理我的口腔状态

我需要嘴巴动画每2秒运行一次，以允许角色间歇说话。这样做的目的是在下面显示文本，只有当文本出现时，嘴巴才能发出嘟嘟声

 state = {
openned : false
 }

  handleMouthState = () => {
this.setState({
  openned : ! this.state.openned
});
  }

  animeMouth = () => {
setInterval(this.handleMouthState.bind(this), 100);
  }

  animMouthWithInterval = () => {
setInterval( this.animeMouth.bind(this), 2000 );
  }

  componentDidMount() {
  setTimeout( this.animMouthWithInterval.bind(this) , 6000);
  }

这是我尝试过的代码，它工作得很好，除了animMouth func继续运行，即使以2秒的间隔调用它，我除了停止动画然后重新加载它之外

停止直接在setInterval中进行绑定，而是在构造函数中进行绑定。发生的情况是，每次触发setInterval时，它都会创建一个新函数，这是不好的。因此，请删除绑定

所有函数都是箭头函数，因此不需要绑定

在执行setInterval之前，请清除上一个计时器

这里是更新的代码

   state = {
       openned : false
   }

   handleMouthState = () => {
       this.setState({
          openned : ! this.state.openned
       });
   }

  animeMouth = () => {
       if(this.mouthInterval){
             clearInterval(this.mouthInterval);
       }
       this.mouthInterval = setInterval(this.handleMouthState, 100);
  }

 animMouthWithInterval = () => {
     if(this.animeInterval){
             clearInterval(this.animeInterval);
       }
     this.animeInterval = setInterval( this.animeMouth, 2000 );
 }

 componentDidMount() {
     setTimeout( this.animMouthWithInterval,  6000);
 }