是否可以檢測到變化<select>立即使用 MutationObserver 的長度？

Question

我有一個<select>標簽，它使用<option>標簽動態填充和更新。 目前，我讓MutationObserver更改跟蹤<select>的.length屬性的局部長度變量。 問題是在MutationObserver實際更新值之前似乎有一些延遲，並且變量通常不是選擇列表的當前長度。 是否有一些解決方法或者這是MutationObserver的性質？

Answer 1

這是您描述的行為的演示。 現在無論我運行多少次，我看到的最長增量總是小於1.5毫秒。 這就是你所說的“延遲”嗎？

我最初想將其寫為評論，但無法在評論中顯示現場演示，所以我正在寫一個答案。 如果您可以改進您的問題以澄清或區分問題，那么我可能會更新此答案以解決它（或者如果它不再與新信息相關，則將其刪除）。

 <div> <select> <option>No options</option> </select> </div> <script type="module"> const select = document.querySelector('select'); let {length} = select; let previousTime = performance.now(); const observer = new MutationObserver((mutations) => { for (const {addedNodes, removedNodes, type} of mutations) { if (type !== 'childList') continue; for (const node of addedNodes) { if (node.tagName !== 'OPTION') continue; length += 1; } for (const node of removedNodes) { if (node.tagName !== 'OPTION') continue; length -= 1; } } const deltaMs = performance.now() - previousTime; console.log('Observed', `length: ${length} (${deltaMs} ms)`); }); observer.observe(select, {childList: true}); const setOptions = (items) => { const options = items.map(str => { const option = document.createElement('option'); option.textContent = str; return option; }); while (select.firstChild) select.firstChild.remove(); for (const option of options) select.appendChild(option); previousTime = performance.now(); console.log('Set', `length: ${select.length}`); }; const delay = (ms) => new Promise(res => setTimeout(res, ms)); setOptions(['a', 'b', 'c']); await delay(2e3); setOptions(['none']); await delay(2e3); setOptions(['one', 'two', 'three']); await delay(2e3); observer.disconnect(); </script>