chore: optimize intersection observer usage

Author: NekoCharm01

app/components/Comment/CommentArea.vue

@@ -68,16 +68,15 @@ function pushComment(data: Comments) {
 
 const commentsArea = ref<HTMLDivElement | null>(null)
 
-const ob = useIntersectionObserver(
-  commentsArea,
-  async ([{ isIntersecting }]) => {
-    if (isIntersecting) {
-      await nextTick()
-      init(props.id)
-      ob.stop()
-    }
+const ob = useIntersectionObserver(commentsArea, async (entries) => {
+  if (entries.length === 0) return
+  const isIntersecting = entries[0]!.isIntersecting
+  if (isIntersecting) {
+    await nextTick()
+    init(props.id)
+    ob.stop()
   }
-)
+})
 </script>
 
 <style scoped lang="sass">

app/components/DeferLoad.vue

@@ -23,7 +23,8 @@ const error = ref(false)
 const imgRef = ref<HTMLImageElement | null>(null)
 
 const ob = useIntersectionObserver(imgRef, async (entries) => {
-  const isIntersecting = entries[0]?.isIntersecting
+  if (entries.length === 0) return
+  const isIntersecting = entries[0]!.isIntersecting
   if (isIntersecting) {
     await nextTick()
     loadImage()

app/components/ErrorPage.vue

@@ -74,12 +74,11 @@ const props = defineProps<{
 }>()
 const msg = ref('')
 function randomMsg(): void {
-  const newValue = msgList[Math.floor(Math.random() * msgList.length)]!
-  if (newValue !== msg.value) {
-    msg.value = newValue
-  } else {
-    randomMsg()
+  let index = Math.floor(Math.random() * msgList.length)
+  if (msgList[index] === msg.value) {
+    index++
   }
+  msg.value = msgList[index % msgList.length]!
 }
 
 effect(() => {

app/components/ShowMore.vue

@@ -19,7 +19,9 @@ const props = defineProps<{
   loading: boolean
 }>()
 
-useIntersectionObserver(elRef, async ([{ isIntersecting }]) => {
+useIntersectionObserver(elRef, async (entries) => {
+  if (entries.length === 0) return
+  const isIntersecting = entries[0]!.isIntersecting
   if (isIntersecting) {
     await nextTick()
     props.method()

app/pages/artworks/[id].vue

@@ -200,15 +200,14 @@ function addObserver(elementRef: Ref, cb: () => any) {
     await nextTick()
     if (illust.value?.illustId) {
       unWatch()
-      const ob = useIntersectionObserver(
-        elementRef.value,
-        ([{ isIntersecting }]) => {
-          if (isIntersecting) {
-            cb()
-            ob.stop()
-          }
+      const ob = useIntersectionObserver(elementRef.value, (entries) => {
+        if (entries.length === 0) return
+        const isIntersecting = entries[0]!.isIntersecting
+        if (isIntersecting) {
+          cb()
+          ob.stop()
         }
-      )
+      })
     }
   })
 }