From 77a96ad29c2aa1487b87e3aa1df4663ab7425632 Mon Sep 17 00:00:00 2001
From: non_hana <1209220829@qq.com>
Date: Wed, 10 Jul 2024 21:46:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=97=A0=E8=84=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/bg-slide/index.tsx | 78 +++++++++++++------------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/components/login/bg-slide/index.tsx b/src/components/login/bg-slide/index.tsx
index 5cac6ed..3314287 100644
--- a/src/components/login/bg-slide/index.tsx
+++ b/src/components/login/bg-slide/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { getRandomBackgroundsAPI } from '@/apis'
 import LazyImg from '@/components/common/lazy-img'
 import { debounce } from 'lodash'
@@ -12,10 +12,10 @@ const BgSlide: FC = () => {
   const [chosenIdList, setChosenIdList] = useState<number[]>([])
   const [loadedImgs, setLoadedImgs] = useState<string[]>([])
   const [isFetching, setIsFetching] = useState(false)
-  const [isPaused, setIsPaused] = useState(false)
-  const [_, setIndex] = useState(0)
+  const [isPaused, setIsPaused] = useState(true)
+  const [index, setIndex] = useState(0)
 
-  const getRandomBackgrounds = useCallback(async () => {
+  const getRandomBackgrounds = async () => {
     if (isFetching) return
     setIsFetching(true)
     try {
@@ -28,55 +28,61 @@ const BgSlide: FC = () => {
       setChosenIdList(data.chosenIdList)
     } catch (error) {
       console.log('出现错误了喵！！', error)
+      return
     } finally {
       setIsFetching(false)
     }
-  }, [isFetching, chosenIdList])
+  }
 
   useEffect(() => {
     getRandomBackgrounds()
-  }, [getRandomBackgrounds])
+  }, [])
 
   useEffect(() => {
     const debouncedGetRandomBackgrounds = debounce(getRandomBackgrounds, 1000)
-    if (chosenIdList.length < 10) {
-      debouncedGetRandomBackgrounds()
+    debouncedGetRandomBackgrounds()
+    if (chosenIdList.length === 10) {
+      debouncedGetRandomBackgrounds.cancel()
     }
     return () => {
       debouncedGetRandomBackgrounds.cancel()
     }
-  }, [chosenIdList, getRandomBackgrounds])
+  }, [chosenIdList])
 
-  const imgLoaded = useCallback(
-    (url: string) => {
-      setLoadedImgs((prev) => {
-        if (prev.includes(url)) return prev
-        return [...prev, url]
-      })
-      if (loadedImgs.length + 1 === bgImgList.length) {
-        setIsPaused(false)
-      }
-    },
-    [loadedImgs.length, bgImgList.length],
-  )
+  const imgLoaded = (url: string) => {
+    setLoadedImgs((prev) => {
+      if (prev.includes(url)) return prev
+      return [...prev, url]
+    })
+  }
 
   useEffect(() => {
-    if (!isPaused) {
-      intervalRef.current = setInterval(() => {
-        setIndex((prevIndex) => {
-          const newIndex = prevIndex === bgImgListRef.current.length - 1 ? 0 : prevIndex + 1
-          if (slideWindow.current) {
-            slideWindow.current.style.transform = `translateX(-${newIndex * 100}vw)`
-          }
-          return newIndex
-        })
-      }, 5000)
+    if (loadedImgs.length <= index) {
+      setIsPaused(true)
+    } else {
+      setIsPaused(false)
     }
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
+  }, [loadedImgs, index])
+
+  const slideImg = () => {
+    setIndex((prevIndex) => {
+      const newIndex = prevIndex === bgImgListRef.current.length - 1 ? 0 : prevIndex + 1
+      if (slideWindow.current) {
+        slideWindow.current.style.transform = `translateX(-${newIndex * 100}vw)`
+      }
+      return newIndex
+    })
+  }
+
+  useEffect(() => {
+    if (isPaused && intervalRef.current) {
+      clearInterval(intervalRef.current)
+    } else {
+      if (!isPaused) {
+        intervalRef.current = setInterval(slideImg, 5000)
       }
     }
+    return () => clearInterval(intervalRef.current!)
   }, [isPaused])
 
   return (
@@ -84,8 +90,8 @@ const BgSlide: FC = () => {
       {/* 阻止用户选中图片 */}
       <div className='absolute h-full w-full z-1' />
       <div ref={slideWindow} className='relative flex h-full transition-transform duration-500'>
-        {bgImgList.map((bgImg) => (
-          <LazyImg imgLoaded={imgLoaded} className='shrink-0' key={bgImg} src={bgImg} alt={bgImg} />
+        {bgImgList.map((bgImg, idx) => (
+          <LazyImg imgLoaded={imgLoaded} className='shrink-0' key={idx} src={bgImg} alt={bgImg} />
         ))}
       </div>
     </div>