為什么需要IntersectionObserver

這篇文章將為大家詳細(xì)講解有關(guān)為什么需要IntersectionObserver，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

允許你追蹤目標(biāo)元素與其祖先元素或視窗的交叉狀態(tài)。此外，盡管只有一部分元素出現(xiàn)在視窗中，哪怕只有一像素，也可以選擇觸發(fā)回調(diào)函數(shù)。

IntersectionObserver 為什么需要它 ？

在我們需要監(jiān)聽目標(biāo)元素是否進(jìn)入視口時(shí)，需要監(jiān)聽scroll事件，大量的計(jì)算會(huì)造成性能問題

IntersectionObserver 怎么解決這個(gè)問題？

IntersectionObserver API 是異步的，不隨著目標(biāo)元素的滾動(dòng)同步觸發(fā)。 即只有線程空閑下來，才會(huì)執(zhí)行觀察器。這意味著，這個(gè)觀察器的優(yōu)先級(jí)非常低，只在其他任務(wù)執(zhí)行完，瀏覽器有了空閑才會(huì)執(zhí)行。

IntersectionObserverEntry 對(duì)象

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出來了');
        }else{
            console.log('我隱藏了');
        }
    }, {
        root: null
    })
    
    // 觀察某個(gè)目標(biāo)元素，一個(gè)觀察者實(shí)例可以觀察任意多個(gè)目標(biāo)元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry對(duì)象提供目標(biāo)元素的信息，一共有六個(gè)屬性。

{
time：可見性發(fā)生變化的時(shí)間，是一個(gè)高精度時(shí)間戳，單位為毫秒
target：被觀察的目標(biāo)元素，是一個(gè) DOM 節(jié)點(diǎn)對(duì)象
rootBounds：根元素的矩形區(qū)域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對(duì)于視口滾動(dòng)），則返回null
boundingClientRect：目標(biāo)元素的矩形區(qū)域的信息
intersectionRect：目標(biāo)元素與視口（或根元素）的交叉區(qū)域的信息
intersectionRatio：目標(biāo)元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時(shí)為1，完全不可見時(shí)小于等于0  
}

options 主要有

{
    root: null, // 指定與目標(biāo)元素相交的根元素，默認(rèn)null為視口
    threshold: [] // [0, 0.5, 1] 當(dāng)目標(biāo)元素和根元素相交的面積占目標(biāo)元素面積的百分比到達(dá)或跨過某些指定的臨界值時(shí)就會(huì)觸發(fā)回調(diào)函數(shù)
    Magin：‘’ // "100px 0" 與margin類型寫法，指定與跟元素相交時(shí)的延時(shí)加載
}

實(shí)例方法

observe()

觀察某個(gè)目標(biāo)元素，一個(gè)觀察者實(shí)例可以觀察任意多個(gè)目標(biāo)元素。注意，這里可能有同學(xué)會(huì)問：能不能 delegate？能不能只調(diào)用一次 observe 方法就能觀察一個(gè)頁面里的所有 img 元素，甚至那些未產(chǎn)生的？答案是不能，這不是事件，沒有冒泡。

unobserve()

取消對(duì)某個(gè)目標(biāo)元素的觀察，延遲加載通常都是一次性的，observe 的回調(diào)里應(yīng)該直接調(diào)用 unobserve() 那個(gè)元素.

disconnect()

取消觀察所有已觀察的目標(biāo)元素

takeRecords()

理解這個(gè)方法需要講點(diǎn)底層的東西：在瀏覽器內(nèi)部，當(dāng)一個(gè)觀察者實(shí)例在某一時(shí)刻觀察到了若干個(gè)相交動(dòng)作時(shí)，它不會(huì)立即執(zhí)行回調(diào)，它會(huì)調(diào)用 window.requestIdleCallback() （目前只有 Chrome 支持）來異步的執(zhí)行我們指定的回調(diào)函數(shù)，而且還規(guī)定了最大的延遲時(shí)間是 100 毫秒，相當(dāng)于瀏覽器會(huì)執(zhí)行：

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

關(guān)于“為什么需要IntersectionObserver”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。