当我的元素附加到 DOM 时如何获得通知答案

【问题标题】：How to get notified when my element has been attached to the DOM当我的元素附加到 DOM 时如何获得通知
【发布时间】：2017-08-02 14:59:10
【问题描述】：

我正在向 Google 地图添加一个使用 SVG 的自定义控件。

加载地图并显示我的控件后，我需要从 svg 元素中获取 BBox。由于我无法控制我的元素何时附加到 DOM，因此我试图找到一个允许我在回调中完成工作的事件。

这大概是我所拥有的：

map = new google.maps.Map(...);
...
container = document.createElement("div")
svg = createAndDrawSVGElement(...); //this returns an svg element
container.appendChild(svg);
INSERT_THE_RIGHT_EVENT_HERE(function() {
    var bbox = svg.getBBox();
    ... //bbox will be empty if svg isn't attached
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(container);

我目前的丑陋解决方法是setTimeout。我想要一些更可预测的东西。

【问题讨论】：

您必须展示您实际构建和附加控件的方式，即。 e. createAndDrawSVGElement() 和 addSVGtoContainer()。通常的模式是异步执行的函数具有一种机制，您可以在其中命名一个回调函数，该函数仅在异步操作完成后执行。但要确定这一点，我们需要查看更多代码。
@ccprog 那些功能已经存在；我没有展示它们，因为它们与问题无关。一个返回svg 元素，另一个将其附加到div。我已经用不同的方式解决了我的问题，我现在将其发布。
重复GetBBox of SVG when hidden
我弄错了，因为我没有意识到实际上将元素附加到 DOM 的是 map.controls[...].push()。在问题中对此进行说明可能会更清楚。

标签： dom svg google-maps-api-3

【解决方案1】：

我能够在没有事件的情况下解决这个问题，方法是将我的 SVG 临时附加到隐藏的 DIV，这样我就可以获得 bbox。

这里的解决方案：https://stackoverflow.com/a/45465286/62024

【讨论】：

【解决方案2】：

在查看 API 之后，我会尝试这个（尽管文档没有明确说明是在附加元素之前还是之后调用它）：

var map = new google.maps.Map(...);
...
var container = document.createElement("div")
var svg = createAndDrawSVGElement(...); //this returns an svg element
container.appendChild(svg);

var controls = map.controls[google.maps.ControlPosition.RIGHT_BOTTOM];
var position = controls.length;

google.maps.event.addListenerOnce(controls, "insert_at", function(i) {
    if (i === position) {
        var bbox = svg.getBBox();
        ... //etc
    }
}

controls.insertAt(pos, container);

【讨论】：