javascript - 如何在js中用两个不同的间隔为一个组件设置动画

Question

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

我需要嘴部动画每 2 秒运行一次，以让 Angular 色有间隔地说话。这个想法是在下面显示文本，只有当文本出现时嘴才需要移动。

 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 函数继续运行，即使它以 2 秒的间隔调用，我除了停止动画然后重新加载它

Answer 1

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