feat: 触底滑动节流

frontend/components/Articles/index.vue

@@ -5,34 +5,26 @@ const isLoading = useState('isLoading', () => false)
 const artlistData = useArtlist(await useFetchPostData())
 const addArtListItem = () => {
   if (useScrollBottom()) {
-    const timer = setTimeout(async () => {
-      if (useScrollBottom()) {
-        pagenum++
-        const type = route.path.replace('/', '')
-        const sort = route.query?.sort as string | undefined
-        const newArtlistData = await useFetchPostData(type, sort, pagenum)
-        artlistData.value.push(...newArtlistData)
-      }
-      clearTimeout(timer)
-    }, 1000)
+    pagenum++
+    useFetchPostData(route.path, route.query?.sort, pagenum).then((data) => {
+      artlistData.value.push(...data)
+    })
   }
 }
 watchEffect(() => {
-  const type = route.path.replace('/', '')
-  const sort = route.query?.sort as string | undefined
   isLoading.value = true
-  useFetchPostData(type, sort).then((data) => {
+  useFetchPostData(route.path, route.query?.sort).then((data) => {
     artlistData.value = data
     isLoading.value = false
   })
 }, { flush: 'post' })
 onMounted(() => {
   const EmployeeWindow = window as any
-  EmployeeWindow.addEventListener('scroll', addArtListItem)
+  EmployeeWindow.addEventListener('scroll', useThrottle(addArtListItem))
 })
 onUnmounted(() => {
   const EmployeeWindow = window as any
-  EmployeeWindow.removeEventListener('scroll', addArtListItem) // 页面离开后销毁监听事件
+  EmployeeWindow.removeEventListener('scroll', useThrottle(addArtListItem)) // 页面离开后销毁监听事件
 })
 </script>
 

frontend/composables/useFetchPostData.ts

@@ -1,24 +1,21 @@
 import type { Ref } from 'vue'
+import type { LocationQueryValue } from 'vue-router'
 import type { IArticleItem, IPanel } from '~~/types/IPanel'
-function fixPoint(num: number) {
-  return num.toFixed(0)
-}
 function formatTime(createdAt: string) {
   const created = new Date(createdAt)
   const now = new Date()
   const duration = (now.getTime() - created.getTime()) / 1000 / 60
   let ans = '刚刚'
-  // 年月日时分秒
   if (duration < 60) // 一小时内
-    ans = `${fixPoint(duration)}分钟前`
+    ans = `${(duration).toFixed(0)}分钟前`
   else if (duration < 60 * 24) // 一天内
-    ans = `${fixPoint(duration / 60)}小时前`
+    ans = `${(duration / 60).toFixed(0)}小时前`
   else if (duration < 60 * 24 * 30) // 一个月内
-    ans = `${fixPoint(duration / 60 / 24)}天前`
+    ans = `${(duration / 60 / 24).toFixed(0)}天前`
   else if (duration < 60 * 24 * 30 * 365) // 一年内
-    ans = `${fixPoint(duration / 60 / 24 / 30)}月前`
+    ans = `${(duration / 60 / 24 / 30).toFixed(0)}月前`
   else // 超过一年
-    ans = `${fixPoint(duration / 60 / 24 / 30 / 365)}年前`
+    ans = `${(duration / 60 / 24 / 30 / 365).toFixed(0)}年前`
   return ans
 }
 function formatArtlist(artlistData: Ref<IArticleItem[]>): IPanel[] {
@@ -45,14 +42,13 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
-// TODO: 请求数据
-export default async (type?: string, sort?: string, pagenum = 1): Promise<IPanel[]> => {
-  // 接口
-  if (type === undefined)
-    type = ''
-  if (sort === undefined)
-    sort = 'recommended'
-  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type}&pageNum=${pagenum}`)
+export default async (
+  type?: string,
+  sort: LocationQueryValue | LocationQueryValue[] | string = 'recommended',
+  pagenum = 1,
+): Promise<IPanel[]> => {
+  type = type || '/'
+  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type.replace('/', '')}&pageNum=${pagenum}`)
   // 数据内容
   return formatArtlist(data)
 }

frontend/composables/useThrottle.ts

@@ -0,0 +1,11 @@
+export default (fn: () => any, wait = 1000) => {
+  let timer: NodeJS.Timeout | null = null
+  return () => {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null
+        fn()
+      }, wait)
+    }
+  }
+}