使用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”更加一致。