<paper-dialog> 过早发生开火事件

Question

我正在使用显示我将以编程方式构建的 SVG 图像。在开始之前，我需要知道渲染容器的大小。我正在等待打开的属性更改为 true ，但这显然太早了，因为 .clientWidth 在触发时为 0，但后来 .clientWidth 确实提供了正确的值。

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

如何等待计算 SVG clientWidth 和 clientHeight？

Answer 1

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

为了解决这个问题（或者至少提供有关正在发生的事情的额外线索），尝试将您的代码（对于 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() 通常是不受欢迎的，因为它不完全遵守异步开发并且会产生意想不到的结果（例如触发得太早或不触发尽快开火）。虽然这种方法很快并且在某些时候可以很好地工作，但触发和处理事件通常是解决这些时序问题的最佳方法。

Answer 2

Polymer 的 <paper-dialog> 实现 iron-resizable-behavior 因此我们可以监听 iron-resize 事件：

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

<paper-dialog> 过早发生开火事件

Event for opened fires too soon in <paper-dialog>

polymer