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

停止直接在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);
 }

如何在js

1 个答案: