如何在js中为具有两个不同间隔的组件设置动画

Question

我需要在名为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秒间隔调用，我除了停止动画然后重新加载它

Answer 1

1. 停止在setInterval中直接进行绑定，而不是在构造函数中执行。会发生的是，每次触发setInterval时它都会创建一个新函数，这是不好的。所以删除绑定。
2. 您的所有功能都是箭头功能，因此不需要绑定
3. 在执行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);
 }