import { useEffect, useRef } from "react"
export const useDebounce = (f:Function,delay:number)=>{
    //使用useRef保存計(jì)時(shí)器，以此確保在組件更新時(shí)始終是同一個(gè)計(jì)時(shí)器，而不是重新創(chuàng)建
    const {current} = useRef<{timmer:any}>({timmer:null})
    useEffect(()=>{
        return ()=>{
            //組件銷毀時(shí)清除計(jì)時(shí)器
            clearTimeout(current.timmer)
        }
    },[])
    return function(...args:any[]){
        //如果計(jì)時(shí)器存在，則清除該計(jì)時(shí)器
        if(current.timmer){
            clearTimeout(current.timmer)
        }
        //重新賦值計(jì)時(shí)器，并在計(jì)時(shí)結(jié)束后執(zhí)行回調(diào)函數(shù)
        current.timmer = setTimeout(() => {
            f.apply(useDebounce,args)
        }, delay);
    }
}

//指向要監(jiān)聽的元素
const bref = useRef(null)
//保存observer對象
const observer = useRef<any>()
 
//每當(dāng)comments變化，都會(huì)重新創(chuàng)建一個(gè)observer對象，其回調(diào)函數(shù)中引用的就是最新的state值
   useEffect(() => {
    let c = new IntersectionObserver((entries) => {
      if (entries[0].intersectionRatio > 0) {
        if (page * pageNum <= count) {
          const fd = new FormData()
          fd.append('articleId', param.articleid)
          fd.append('page', page + 1)
          fd.append('pageNum', pageNum)
          http({ url: '/comment/comments', options: { method: 'POST', body: fd } }).then(res => {
            if (count !== res.count) {
              setcount(res.res.count)
            }

            setpage(page + 1)
            setcomments([...comments, ...res.res.rows])
          })
        }

      }
    })
  //取消舊的監(jiān)聽
    if (observer.current) {
      observer.current.unobserve(bref.current)
    }
//保存新的observer對象，并建立新的監(jiān)聽
    observer.current = c
    observer.current.observe(bref.current)
  }, [comments])