什麼是CSS和Javascript之間的排序

Question

我有一個奇怪的間歇性錯誤，發生在填充嵌入在swiper中的列表之後。基本上，我得到了頁腳的最後一個元素溢出。

奇怪的是，在我插入最後一個節點並且事實上在我調用了swiper reninitialiser之後，它出現了一段時間。

如果我觸發了一個調整大小事件，它會自行修復 - 但只有在我調用swiper reinit後，在500ms到2秒之間等待。

爲了讓這一切都非常有趣，重疊的數量一直在變化。

這讓我想知道我所看到的是JavaScript填充列表並調用swiper reinit，然後在firefox和chrome的所有樣式正在應用導致溢出的地方。

由於用戶CPU速度不同，我並不想使用與定時器相關的觸發器。我不想在嘗試之前繼續嘗試它 - 因爲有時它根本不會發生。

無論如何，有沒有人有關於JavaScript應用CSS的60秒講座 - 並且偶然會有一些事件告訴我它已完成，因此我可以在調整大小後檢查div嗎？

Answer 1

通過CSS樣式表應用CSS樣式時沒有延遲。樣式在重新繪製之前或在重新佈置之前應用。除非您動態加載樣式表或將其放置在影響的HTML之後，否則不需要等待CSS樣式表規則的應用。

我的猜測是，swiper reinitialzer中的某些東西正在做一些改變之前，內容已經正確佈置。延遲允許佈局在下次調整大小時發生，這一切都可以修復它自己。

沒有看到真正發生了什麼（可能在一個正常工作的網頁上）並且瞭解更多關於swiper代碼的知識，我們所能做的只是猜測。我瘋狂的猜測是佈局必須在修改列表和重新初始化之前發生。有幾種方法通過請求瀏覽器知道的某些屬性在佈局發生之前不準確來強制佈局。正在等待使用setTimeout(fn, 1)進行重繪時，在調用fn回調之前還會觸發任何掛起的佈局，並且setTimeout()中的任何時間值都會生效，因爲只需等待setTimeout()觸發，就可以進行重繪。

您可以看到如何觸發this article中的佈局（請求這些屬性中的任何一個offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop/Left/Width/Height, clientTop/Left/Width/Height）。