Polymer 在<；纸张对话框>；

我用它来显示一个SVG图像，我将通过编程来构建它。在开始之前，我需要知道渲染容器的大小。我正在等待打开的属性更改为true，但这显然太快了。当稍后触发时，clientWidth为0。clientWidth确实提供了正确的值

<paper-dialog class="dialog" opened={{modalOpen}} modal>
     <svg width="100%", height="100%" />
</paper-dialog>

---

如何等待SVG clientWidth和clientHeight的计算呢？

有时候在DOM完成处理之前会触发JS事件，这里就是这种情况

若要绕过此问题（或至少提供有关发生了什么的其他线索），请尝试将代码（用于

clientWidth

属性）放入

setTimeout（）

函数中，并为其设置零（0）毫秒超时。这将简单地将您的代码移动到JS执行堆栈的末尾，只有在DOM完成更新后才能处理该堆栈。。。随后，当DOM元素的大小和定位属性可用时

这里有一个例子

modalOpen() {
  setTimeout( () => {  
    /* Your code here... for example... */
    const paperDialog = document.getElementsByTagName("paper-dialog")[0];
    console.log("paperDialog width = ", paperDialog.clientWidth);  
  }, 0);  /* 0 milliseconds = Execute immediately after everything else processes. */
}

警告：通常不赞成使用

setTimeout（）

，因为它不完全遵循异步开发，并且可能产生意外的结果（例如触发过快或不尽快触发）。虽然这种方法很快，在某些情况下可以正常工作，但触发和处理事件通常是解决这些计时问题的最佳方法。

Polymer的

实现，因此我们可以监听

iron resize

事件：

disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('iron-resize', this.onIronResize);
}

---

零超时不起作用。一秒钟的超时可以。如果1毫秒的超时有效，则可能意味着在执行堆栈中添加了其他内容，超时时间为0。这是另一个原因，使用内置或客户事件将是一个更好的方法。。。您可能与其他

setTimeout（）

s发生冲突。