如何判断IntersectionObserver是否仍然在观察某些东西

时间:2017-07-15 03:30:47

标签: javascript dom viewport

我使用IntersectionObserver观看一组项目,然后在我的回调更改后忽略每个项目。

var watchItems = new IntersectionObserver(alterItem,{threshold:[0.3]}),
items = $(".item");

for(i=0;i<items.length;i++){
    watchItems.observe(items[i]);
}

function alterItem(observation) {
    observation.forEach(function (item) {
        if (item.isIntersecting) {
            // do stuff
            watchItems.unobserve(item.target);
        }
    });
}

如果我的所有项目都经过这个过程,我想使用例如watchItems.disconnect()完全停用观察者。我不确定它可以通过什么样的内存影响让它保持开放,也许可以忽略不计,但是当我把它们作为一种好的做法时,我喜欢关闭它们。

我知道我可以通过跟踪项目数量并将其与未观察到的项目数量相匹配,或者通过使用数据属性来解决这个问题,但是我想知道的是,如果有人知道它是否& #39; API中固有的。它显然是以某种方式跟踪现有的观察者,我想知道在哪里和如果我可以访问它。

在使用IntersectionObserver对象放置观察者之前和之后查看它并没有提供我能找到的真实线索。

1 个答案:

答案 0 :(得分:0)

有一个名为takeRecords()的方法,但是即使没有更多要观察的元素,它也会返回一个元素(已观察到)。

我通过简单地在un / observed元素上添加一个计数器来解决它,这里是一个示例(使用了Angular和Typescript):

[...]

private observedElements: number = 0;

[...]

// Adding elements to be observed

this.observer.observe(myItem.nativeElement);
this.observedElements++;

[...]

// If element is visible

if (observerEntry.isIntersecting) {

   this.observer.unobserve(observerEntry.target);
   this.observedElements--;

   if (this.observedElements === 0) {

      this.observer.disconnect();
      this.observer = null;

   }

}

[...]

使其适应您的需要并节省内存:)。

希望有帮助。

欢呼 Unkn0wn0x