javascript - Intersection Observer 在 Angular 7 应用程序中卡住 IE11

Question

我创建了一个 Angular 7 应用程序，并使用 Intersection Observer 来延迟加载一些项目。它在 Chrome、Mozilla 甚至 Edge 中运行起来轻而易举。但在 IE11 中，当延迟加载启动且交集观察器启动时，应用程序会卡住。我在 polyfills.ts 中添加了 import 'intersection-observer' 以支持 IE11。我对这种行为感到困惑。

  intersectionObserverForTableRow() {
    const selectedNodeLists = document.getElementsByClassName('tableDataRow');

    const tableIntersectionObserver = new IntersectionObserver((entries, tableIntersectionObserver) => {
      entries.forEach((entry) => {
        if (!this.hasNextPage) {
          this.showShimmerRows = false;
          tableIntersectionObserver.disconnect();
        }
        if (entry.isIntersecting) {
          const el = entry.target;
          // console.log(el.id, ('lazyLoadedObserver' + (this.currentTableContent.length - 1)))
          if (el.id === ('lazyLoadedObserver' + (this.currentTableContent.length - 1))) {
            // console.log('inside');
            // this.currentTableContent = this.currentTableContent.concat(this.setDummyDataForTableRowShimmer());
            this.setDummyDataForTableRowShimmer();
            this.pageNumber++;
            this.loadNextSetOfData.emit(this.pageNumber);
            // console.log(this.currentTableContent)
            // setTimeout(() => {
            //   this.triggerObserver(selectedNodeLists, tableIntersectionObserver)
            // }, 10);
            tableIntersectionObserver.unobserve(entry.target);
          }
        }
      });
    });

    this.triggerObserver(selectedNodeLists, tableIntersectionObserver);
  }

Answer 1

编辑

我发现，即使将下面提到的属性设置为 false，在 IO polyfill 处于事件状态下滚动时，IE 仍然非常慢。最后我的解决方案是使用去抖动滚动事件并在那里处理我的逻辑。我创建了一个滚动指令来处理这个问题。

private setScroller(scroller: CdkScrollable) {
  this.scroller = scroller;
  this.scroller.elementScrolled().subscribe(() => {
    this.scrolled();
  });
}

@debounce() // this is a debounce decorater that only triggers if there are no events for over 300ms
private scrolled() {
  // dispatch an event to the SETTER to get the componentId
  if (this.isIE11) {
    this.callIEFunction();
  }
}

为此使用 @HostListener 也会降低我的 IE 速度。

<小时/>

所有这些其他答案都以某种方式忽略了他对 IE 使用了 polyfill 的这一点，因为 IE 不支持它。

但是，如果您使用 W3C 的官方路口观察器 polyfill，则当您尝试激活它时，它会卡住 IE。

我遇到了同样的错误(首先发现了这个问题)，但后来我在文档中发现了一个小细节:

Ignoring DOM changes
You can also choose to not check for intersections when the DOM changes by setting an observer's USE_MUTATION_OBSERVER property to false

这对于原始 IO 来说是不可能的(因为它开箱即用地处理这个问题)，所以很容易被忽略。但显然 w3c 的实现也检查 dom 突变。

频繁更改 dom 的 Angular(我猜还有 React 和其他框架)可能会卡住 IE。其他浏览器支持开箱即用的 IO，因此从不使用 polyfill。

长话短说，这对我有用:

var io = new IntersectionObserver(callback);
io.USE_MUTATION_OBSERVER = false;

文档还提到您可以全局禁用此功能，但这对我来说并没有真正起作用。

IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me)