时间戳

首页 > 解决方案 > 开火事件过早

polymer - 开火事件过早

问题描述

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

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

如何等待计算 SVG clientWidth 和 clientHeight？

标签： polymer

解决方案

有时 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()通常不受欢迎，因为它不完全遵循异步开发并且可能产生意想不到的结果（例如过早触发或不尽快触发）。虽然这种方法很快并且在某些时候可以正常工作，但触发和处理事件通常是解决这些时序问题的最佳方法。

推荐阅读