关于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(){&nbsp; &nbsp; clearInterval(timer);//不管定时器开没开，都清除一次&nbsp; &nbsp; //这里再写其它代码},1000);

Answer 3

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