在緩存之前等待一個元素被加載

Question

我試圖用我的代碼更有組織。我有一個主要的對象，我正在向該對象添加方法。

問題是：我不知道如何緩存我的選擇器。有一個元素會被延遲添加，並且總是以null結尾。所以我正在尋找這樣做的最佳做法。

這裏是我所在的地方：

var stickyAd = {}; 
 

 
// cache the elements I'll need 
 
stickyAd.primaryContent = document.getElementById('primary-content'); 
 
stickyAd.wpadminbar = document.getElementById('wpadminbar'); 
 

 

 
// Calculate the offset of an element from the top of the document 
 
stickyAd.topOffset = function(el) { 
 
    var rect = el.getBoundingClientRect(), 
 
    scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
 
    return { top: rect.top + scrollTop }; 
 
}; 
 

 

 
// The rest of my methods 
 
stickyAd.scrollDetect = function(){}; 
 

 
stickyAd.stickyOn = function(){}; 
 
stickyAd.stickyOff = function(){} 
 

 
stickyAd.init = function(){ 
 
\t stickyAd.scrollDetect(); 
 

 
}; 
 

 
// Finally, call init() 
 
stickyAd.init();

這wpadminbar元素，此腳本加載後獲取添加的一個，所以它總是出現空。因此，儘管這看起來像是一個相當具體的問題，但我期待着看到如何最好地組織這種方式來防止這種情況發生。

我該如何在適當的時候緩存這個對象內的選擇器？我是否將它們包裝在DOMContentLoaded函數或其他東西中？

感謝您的任何幫助！

Answer 1

這裏有三個選項：

1. 敷患處代碼在DOMContentLoaded處理程序，以便您確定代碼運行之前DOM滿載。

2. 不要在代碼實際需要之前嘗試緩存DOM元素（例如，不要提前緩存）。

3. 不要緩存它。只需在需要的時候獲取DOM元素。這是最安全的，通常綽綽有餘。如果在函數執行過程中需要多個地方使用相同的DOM元素，則可以在函數內本地緩存它，但通常不需要跨操作長期緩存它。