【博客端】为投票项组件添加延迟加载，使用定时器确保元素在视口内时获取投票详情

Author: eeg1412

blog/components/VoteItem.vue

@@ -224,26 +224,32 @@ const domId = computed(() => {
 })
 
 let observer = null
+let timer = null
 onMounted(() => {
   nextTick(() => {
-    if (voteItemRef.value) {
-      // 如果元素不在视口内，创建 IntersectionObserver
-      observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          getVoteDetail()
-          observer.disconnect()
-          observer = null
-        }
-      })
-      observer.observe(voteItemRef.value)
-    }
+    timer = setTimeout(() => {
+      if (voteItemRef.value) {
+        // 如果元素不在视口内，创建 IntersectionObserver
+        observer = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            getVoteDetail()
+            observer.disconnect()
+            observer = null
+          }
+        })
+        observer.observe(voteItemRef.value)
+      }
+    }, 100)
   })
 })
 onUnmounted(() => {
   if (observer) {
     observer.disconnect()
     observer = null
   }
+  if (timer) {
+    clearTimeout(timer)
+  }
 })
 </script>