使用CSS和JS动态设置div尺寸时，如何补偿更长的加载时间？

Question

我正在创建一个Polymer应用程序，它在自定义元素“table”中的行中显示信息。 我使用聚合物flexbox类来初始定位元素。 我需要在元素加载后使用JS进行测量，并相应地为表中的元素指定宽度。 问题是这样的：

row 1
*--------------------*
|       *-----------*|
|       |    el a   ||
|       *-----------*|
*--------------------*
row 2
*--------------------*
|            *------*|
|            | el b ||
|            *------*|
*--------------------*

第1行和第2行具有固定的宽度，但是el a或b可以具有任何宽度。 无论el a或b的内容如何，​​我都希望行中包含的el与宽度最宽。 因此，在这种情况下， a是最宽的，因此el b应调整其宽度以匹配a 。

我正在使用聚合物attached方法来确保在通过JS进行scrollWidth测量之前加载元素。 当我尝试用querySelector抓取它时，我最初遇到了获取未定义元素的问题，但我使用Polymer的async修复了这个问题。 我可以在现代浏览器中很好地设计元素的样式。 请考虑以下代码。

attached: {
  this.async(function() {
    console.log(Polymer.dom(this.root).querySelector('#a').scrollWidth);
    console.log(Polymer.dom(this.root).querySelector('#b').scrollWidth);
  }, 100);
}

现代版本的chrome将返回类似100px的a和60px的b 。 如果我测试较旧版本的chrome或不同的浏览器（如firefox），则a和b将比现代测量的镀铬低5-15px。 我发现如果我足够长时间地增加异步时间，无论浏览器的年龄如何，我最终都会得到一个与现代镀铬返回的测量值相匹配的测量值。 这就是说，当看起来div存在于页面上并且我可以使用querySelector抓取它时，它似乎是波动的，所以它还没有达到它的全宽。

我不想猜测元素在进行测量之前需要多长时间才能完全加载。 我试图找出一种方法，我可以100％确信元素已经完成加载，或者可能是另一种造型这些我忽略的元素的方法。 我最成功的是在正在进行测量的函数上使用setTimeout并等待它连续几次测量同样的事情。 但即使这样，一直走在时间和偶尔不一致b将略少宽比a出现在网页时。

Answer 1

当你需要继续检查事物的一个选项，即使它已经成功几次，就是继续无限地使用setTimeout，直到值不再为certian＃of iterations改变。 例如，如果它们在10次超时后仍然相同，则停止超时。

就像是...

var count = 0;
function check() {
   do_something();
   if (same_as_last_time == true) {count++}
   if (count < 10) setTimeout (check,100);
}
setTimeout (check,100);

虽然这可能非常低效，并且可能无效，具体取决于您的数据出现的交错方式。

我相信这里的实际解决方案在于您使用变量“.scrollWidth”作为测量点，这是一种可靠的测量方法，可以跨浏览器标准化您的宽度。 有关详细信息，请参阅此SO帖子（ https://stackoverflow.com/a/33672058/3479741 ）

我建议改为使用另一种获取宽度的方法，然后比较看看你的结果是否更一致。 在上面的文章中，有许多选项比“.scrollWidth”更加一致。