做游戏任务赚钱的网站市场营销策划方案模板
最开始直接setInterval里，useState硬写，发现更新不，固定值
换let，发现dom更新不了
正确做法是用ref
并且pc端可以长按的，只是要用onTouchStart，不要用onMouseDown
onTouchStart={handleMouseDown} onTouchEnd={handleMouseUp} onTouchMove={handleMouseUp}
然后我是一个rounded大盒子
盒子里套了一个rounde的absoulte，但是overflow-hidden，和一个正方形的div，这样就会出现竖线进度条。
<divclassName="py-[6px] px-[12px] rounded-[25px] flex justify-center items-center gap-[5px] border "style={{ border: "1px solid rgba(255,255,255,0.80)" }}><div className=" absolute w-full h-full -z-10 overflow-hidden rounded-[25px] "><divclassName={`h-full -z-10 bg-[rgba(255,255,255,0.40)]`}style={{ width: `${progress}%` }}></div></div><span onTouchStart={handleMouseDown} onTouchEnd={handleMouseUp} onTouchMove={handleMouseUp}>长按跳过</span><LongClickIcon /></div>code
const [progress, setProgress] = useState(0)const timerRef = useRef<number>()const handleMouseDown = () => {timerRef.current = setInterval(() => {setProgress((prevProgress) => {if (prevProgress === 100) {clearInterval(timerRef.current)handleClick()return 100} else {return prevProgress + 1}})}, 10)}const handleMouseUp = () => {clearInterval(timerRef.current)setProgress(0)}useEffect(() => {return () => {setProgress(0)clearInterval(timerRef.current)}}, [])就类似这样，实现的胶囊💊切半形加载
