ancho DIV inmediatamente después de agregar es calcular mal?

Question

En el script en el que estoy trabajando, agrego un marcado para un formulario de comentarios al cuerpo y luego centrar ese elemento (un DIV) en la pantalla con jQuery. En el siguiente ejemplo de código, form_code contiene mi marcado de formulario. Los estilos CSS definidos para #feedback_form definen explícitamente un ancho. Sin embargo, el cálculo del ancho() llamado inmediatamente después de agregarse es calcular incorrectamente, devolviendo una dimensión casi igual a todo el ancho de la página.

Si señalo el ancho con la consola, incluso segundos después, se calcula correctamente. Nunca te topes con esto antes, ¿alguien puede arrojar algo de luz sobre esto?

jQuery('body').append(form_code); 
alert(jQuery("#feedback_form").css("width")); 

Answer 1

el código JavaScript se ejecuta en un hilo diferente a la que representa el HTML. Si consulta el ancho inmediatamente después de agregar un nuevo código, el hilo de renderizado no habrá tenido tiempo de retransmitir la página para que obtenga el ancho anterior, o posiblemente intermedio.

No estoy seguro de si este es el caso con los navegadores más nuevos, pero ciertamente los antiguos eran multitarea cooperativa por lo que la página no se actualizaría hasta que se pausara explícitamente para permitir su actualización.

Si utiliza el siguiente código, verá que funciona porque la pausa de cero segundos le permite al navegador procesar el evento rerender.

function show_width() { 
    alert(jQuery("#feedback_form").css("width")); 
} 
setTimeout(show_width, 0); 

Answer 2

¿Qué estás buscando hacer? Su código está agregando elemento (s) al DOM, lo que lleva tiempo. ¿Estás tratando de procesar algo en función del ancho, etc. después de agregar tu form_code?