react中去掉定时器失败

react中去掉定时器失败

最近遇见一个需求，鼠标进入动画开始，鼠标移出动画从当前位置倒放，于是参照别人的网站，没有用MP4而是把动画的每一帧搞成一张长图，通过移动图片的background-position-y来展现动画效果。

具体大概就是使用定时器，鼠标进入时，定时器开始，当图片到底部时，清除这个定时器；
然后鼠标移出时，先清除之前的那个进入时的定时器（所以鼠标进入时，也要先清除倒放的这个定时器），然后再开始倒放的定时器，到图片开始的位置时，再清除当前定时器。

思路大概就是这样，很简单，但却遇见了问题，那就是定时器清除不掉。
原因就是定时器要定义在全局

所以最后，代码就是这样的

var timer: any = null;//一定要定义在这个外面
const Home: FC<Iprops> = (props) => {
const [posiy, setPosy] = useState(0);
return(
<div
                        className={classNames(styles["box_img"])}
                        style={{
                          backgroundImage: "url(" + icon + ")",
                          backgroundPositionY: posiy + "px",
                        }}
                        onMouseEnter={(e) => {
                          e.stopPropagation();
                          clearInterval(timer);
                          timer[index] = setInterval(() => {
                            setPosy((posiy) => {
                              if (posiy> -900) {
                                posiy = posiy - 100;
                                return posiy ;
                              } 
                              else {
                                clearInterval(timer);
                                posiy = -900;
                                return posiy ;
                              }
                            });
                          }, 50);
                        }}
                        onMouseLeave={(e) => {
                          e.stopPropagation();
                          clearInterval(timer);
                          timer = setInterval(() => {
                            setPosy((posiy) => {
                              if (posiy < -100) {
                                posiy  = posiy  + 100;
                                return posiy ;
                              } 
                              else {
                                clearInterval(timer);
                                posiy= 0;
                                return posiy ;
                              }
                            });
                          }, 50);
                        }}
                      ></div>
)
}
export default Home;