✊不积跬步，无以至千里；不积小流，无以成江海

场景描述

在制作广告页面时，自己封装了一个api来实现用通过手势滑动广告内容。

但是在实现过程中，实现能够接收到滑动这一指令之后，即滑动的move状态能够被监听到且能够判断向左滑 / 向右滑之后，手势滑动一次会直接滑出页面，如下图：

我期待的是滑动一次会跳到下一页，但是图上的场景表示我滑动一次直接跳到最后一页了（因此指向的地址是路由不存在）。

原因分析

console.log一下发现是由于move每次移动的变量不只是1，所以每一个单位移动一个页面的话，进行一个手指滑动的操作，最后一定会滑出路由地址。因为人的手指进行滑动操作（由于是通过滑动的距离判断方向），不可能一次就滑动一个单位。

解决办法

节流。即在这次动画没有结束之前不能够触发下一次。

方法有两个：

1. 设立时间。如果知道动画耗时所需时间就可以在这段时间阻止下一个动画发生。
2. 监听动画结束。

在我的场景下，2比较适用。

具体代码

1. 首先需要一个变量监听是否在动画中（ref变量，因为不参与UI的变化），设立初始值为false
2. 判断如果在动画中，则不能够进行下一页
3. 在状态改变的一开始将它设置为true，如果一上来就是true那么直接retunrn。
4. 在状态结束时又将它恢复为false

//设立初始值并且初始化为false
const animating = useRef(false)
...
//状态结束后恢复会false
onRest: () => {
animating.current = false
}
...
//如果在动画中
useEffect(()=>{

//一上来就是true直接return
if ( animating.current ){return}
...
//否则将现在的animating状态变为true
animating.current = true
...
}
)