如何让我的 javascript 函数等待 html 元素呈现答案

【问题标题】：How to make my javascript function wait for a html element to render如何让我的 javascript 函数等待 html 元素呈现
【发布时间】：2015-07-14 11:28:36
【问题描述】：

AngularJS 中只有一个页面应用程序。它有嵌套的选项卡。在内部选项卡中有一个按钮，在该按钮上触发了一些事件。我需要触发内部选项卡上存在的此按钮的单击事件两个选项卡都呈现后呈现按钮。等到标签呈现自己并且按钮可用时，最好的方法是什么。

我尝试使用“while 循环”（即一直循环直到按钮的 id 未定义）和 $timeout（将超时设置为 2-3 秒）服务，但是当标签呈现延迟时，两者都会产生后果。

如果有更好的方法，请提出建议。

【问题讨论】：

如何检索这些 DOM 元素？使用阿贾克斯？因为html应该在那里（角度只会填充数据..）你能解释整个场景吗？
使用角度，加载html模板。
查看类似问题的答案：stackoverflow.com/questions/40398054/…

标签： javascript html angularjs

【解决方案1】：

尽管这个问题真的很老，但我找到了一个适合我的解决方案，我认为它可能对某些人有所帮助。

在执行更多代码之前调用element.getBoundingClientRect() 对我有用。根据文档，此方法返回有关相对于视口(docs) 的位置信息：

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，提供有关元素大小及其相对于视口的位置的信息。

假设屏幕必须渲染以查找有关元素位置的信息，从技术上讲，此函数将等待 html 元素渲染，甚至使 html 元素渲染。

请记住，这只是一个假设，我不能保证它会起作用。

【讨论】：

【解决方案2】：

你可以用 jQuery 做到这一点： $(document).ready(callbackFn);

或原生 JS：

document.addEventListener('readystatechange', function onReadyStateChange() { if (document.readyState !== "complete") return; callbackFn(); }, false);

【讨论】：

我认为这是错误的，因为 html 可能是异步检索的，否则很容易
好吧，在这种情况下，我认为可以在 ajax 事件上调用事件侦听器（可能还有 ready 函数）（可能使用其他事件类型）
作为一个 SPA，上面的事件已经被触发并且在标签渲染时不会触发