如何使我的javascript函数等待呈现的html元素

Question

AngularJS中有一个页面应用程序。 它有嵌套标签。在内部选项卡中有一个按钮，其中某些事件被触发。我需要触发内部选项卡上的此按钮的单击事件按钮在两个选项卡呈现后呈现。等待标签自我渲染并且按钮可用的最佳方式是什么。

我尝试使用'while循环'（即保持循环直到id为按钮未定义）和$ timeout（设置超时为2-3秒）服务，但是当选项卡渲染有延迟时，两者都有其后果。

请建议是否有更好的方法。

Answer 1

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

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

<块引用>

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

假设屏幕必须渲染才能找到有关元素位置的信息，那么这个函数在技术上会等待 html 元素渲染，甚至让 html 元素渲染。

记住，这只是一个假设，我不能保证它有效。

Answer 2

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

或原生JS：

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