Tengo una etiqueta <select> que se completa y actualiza dinámicamente con etiquetas <option> . Actualmente dejo que MutationObserver cambie la variable de longitud local que realiza un seguimiento de la propiedad .length de <select> . El problema es que parece haber un retraso antes de que MutationObserver actualice el valor y, a menudo, la variable no tiene la longitud actual de la lista de selección. ¿Hay alguna solución o es esta la naturaleza de MutationObserver ?
Aquí hay una demostración del comportamiento que describiste. Ahora, no importa cuántas veces lo ejecute, el delta más largo que veo siempre es inferior a 1.5 ms. ¿A eso te refieres con "retraso"?
Inicialmente, quería escribir esto como un comentario, pero no hay forma de mostrar una demostración en el sitio en un comentario, así que estoy escribiendo una respuesta. Si puede refinar su pregunta para aclarar o diferenciar el problema, entonces puedo actualizar esta respuesta para abordarla (o eliminarla si ya no es relevante para la nueva información).
<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>