关于react事件冲突

Question

假设当前有5个div，每个div都有一个hover事件，当hover时这个div会执行一段动画，当已匀速去依次hover时，事件效果正常，但当你迅速移过它们时，就会出现一个动画还没结束，另外一个动画又开始，该如何去避免这样的现像？动画效果是用css3实现的。我的做法是用setTimeout,但是，没有效果，所以向各位请教怎么处理这个问题？大致的代码：   enterFunc(index){         this.setState({             currenIndex:index         })   }   render(){       return (            <div className="test">                {   //class 'on'里有动画                  this.props.arr.map((item,index) => {                      <div                       className={this.state.currentIndex === index?'list on':'list'}                      onMouseEnter={this.enterFunc.bind(this,index)}                      >                           //内容。。                      </div>                  })                }            </div>       )   }

Answer 1

使用一个布尔值变量来控制，当hover后，判断是否为真，为真，直接退出，否则设置为真，动画执行完后再设置为假

Answer 2

举个例子，每个定时器使用之前先关闭：

var timer = null; //定时器

timer = setInterval(function(){

    clearInterval(timer);//不管定时器开没开，都清除一次

    //这里再写其它代码

},1000);

Answer 3

onmouseout时，直接将这个动画样式移除掉。