原生IntersectionObserver交叉觀察者

前端開發，對於Observer，應該很熟悉，早以前，剛開始開發前端的時候，總是看羣裏大佬說沒有被Observer到，以爲老高大上了。簡單解釋就是觀察者，也就是說沒有被監聽到，其實跟訂閱發佈或者觀察者模式有點相似。

提供了一種異步觀察目標元素與其祖先元素或頂級文檔視窗(viewport)交叉狀態的方法。祖先元素與視窗(viewport)被稱爲根(root)。

簡單來講就是監聽元素出如今根元素，IntersectionObserver接收兩個參數，第一個是回調，第二個是配置項：

new IntersectionObserver(handler, options)

let observer = new IntersectionObserver((entries, observer) => {

}, {

root: null,

rootMargin: '0px',

threshold: [0],

});

handler函數有兩個參數，一個是監聽對象的數組，一個是當前實例

options有三個參數:

root：指定根元素，若是沒有指定是默認document

rootMargin：默認0px，好比一個div寬高300px,設置50px的rootMargin,那麼就是監聽這個div上下左右都減去50px。

threshold：線性升序排序，就是出現到這個元素的百分比的時候就觸發回調函數。

而後監聽：

observer.observe(document.querySelector('#test1'))

總共有四個方法：

observe()開始監聽一個元素，能夠同時監聽多個

disconnect()中止監聽全部

takeRecords()返回全部觀察目標的對象數組

unobserve()中止監聽特定目標

看一個簡單的效果：

看看代碼：

let observer = new IntersectionObserver((entries, observer) => {

let percent = entries[0].intersectionRatio * 100;

document.getElementById('percent').innerText = parseInt(percent) + '%'

}, {

root: null,

rootMargin: '0px',

threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],

});

observer.observe(document.getElementById('test'))

百分比會有一些偏差，沒辦法真正在百分之10這樣的時候觸發回調，由於IntersectionObserver API 是異步的，不隨着目標元素的滾動同步觸發。這個觀察器的優先級很是低，只在其餘任務執行完，瀏覽器有了空閒纔會執行。

運用這個api，能夠很容易實現懶加載，還有視頻往上滑動就暫停，無限滾動等。並且使用這個api最大的優點就是對性能的友好了。固然，兼容性倒是一個須要考慮的因素。

最後有個問題，我不知道爲何我初始化以後，一監聽就會先進入回調，這個問題沒有找到答案。有個羣友說根據rxjs的解釋，跟熱觀察和冷觀察會有關係，不知道這個api是不是熱觀察，若是是熱觀察，那麼初始化就會監聽。