javascript - 我怎样才能等到某些东西不为空然后运行该函数

Question

所以目前这个函数 highlight 在 ngOnInit 上被调用，但是放入 DOM 的文本需要一秒钟左右的时间写入DOM。

因此，当函数运行并期待其中的文本时，它会返回 null。当 document.getElementById('scrollable') NOT === null 时，如何运行此函数。

到目前为止，我让它运行的唯一方法是超时 800ms 但这并不好，因为有些人的互联网速度比其他人慢，所以如果互联网或计算机需要更长的时间来加载页面。

我尝试了几种不同的方法，但都不起作用。如果大家有什么好的建议请告诉我。

highlight(words) {
      const high = document.getElementById('scrollable');
      const paragraph = high.innerHTML.split(' ');
   }
}

当前使用 Angular 6。

HTML:https://gist.github.com/ElAndy94/fa78b5b25a73716e2c32045c6c6be1ff

TS:https://gist.github.com/ElAndy94/85950e0e84aad30a72d3b91faa7d6278

Answer 1

我建议你看看Angular Component Life Cycle 。您应该使用 AfterViewInit Hook 来确保您的 View 已初始化。

import { Component, AfterViewInit } from '@angular/core';

@Component({...})
export class MyOwnComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit() { // Here your view is checked and initialized.
    this.highlight();
  }

  highlight(words) {
    const high = document.getElementById('scrollable');
    const paragraph = high.innerHTML.split(' ');
    ...
  }

}