¿Cuándo no debería usar $ (document) .ready (function() para manejadores de eventos?

Question

Soy nuevo en jquery y javascript y solo quería saber, ¿por qué no quiere usar la función .ready() para todo su evento? manipuladores?

no Podría haber problemas potenciales si un usuario envía entrada a un evento de ratón o un evento de teclado antes de que toda la página se ha rendido?

Answer 1

Esto nunca debería ser el caso, el documento jQuery listo se dispara cuando se ha cargado el DOM. No espera a que se cargue la página completa (imágenes incluidas y similares). Sería extremadamente raro que un usuario pudiera reaccionar a tiempo para tratar de activar algo antes de que se ejecute su código. Leer esto: http://api.jquery.com/ready/

En concreto, el primer párrafo:

Mientras JavaScript proporciona el evento de carga para ejecutar código cuando se procesa una página , este evento no se disparará hasta que todos los activos tales como imágenes tienen sido completamente recibido. En la mayoría de los casos, la secuencia de comandos se puede ejecutar tan pronto como se haya construido por completo la jerarquía DOM . El controlador pasado a .ready() se garantiza que será ejecutado después de que DOM esté listo, por lo que este suele ser el mejor lugar para conectar todos los demás controladores de eventos y ejecutar otro código jQuery.

por lo que usar $ (document) ready (function() {}) o el equivalente de $ (function() {}) es siempre una buena práctica.

EDITAR: Para garantizar que el usuario nunca tenga problemas, asegúrese de que todos los scripts estén alojados junto a su sitio. Por ejemplo, jQuery tiene la opción de usar un CDN. Los CDN son agradables, pero si por alguna razón el usuario puede acceder a su sitio pero no a CDN, podría dejar su página en un estado inútil.

Answer 2

creo que realmente debe utilizar el controlador $(document).ready(). la razón ser es, si su HTML o DOM aún no se ha cargado completamente, cuando vincula eventos a diferentes elementos, pueden fallar en virtud de no haber estado en la página todavía.

No estoy seguro de quién o qué le dijo que no coloque controladores de eventos en la función de listo, pero diría que es una práctica bastante común.

Answer 3

por eso la mejor práctica es envolver todo el código dentro de la función .ready().

$(document).ready(function(){ 
    //all event handlers here 
}); 

no Podría haber problemas potenciales si un usuario envía entrada a un evento de ratón o un evento de teclado antes de que toda la página se ha rendido?

El problema no es anterior a que se haya renderizado toda la página o no. El problema es cuando aún no se ha cargado jQuery, y luego un usuario intenta hacer clic en algo que se maneja a través del controlador de eventos jQuery. Por lo tanto, para responder a su pregunta; sí, podría haber un problema potencial allí.

Answer 4

hay circunstancias en las que no desea o no puede asociar controladores de eventos en listo, ya que sólo desea activar un evento después de algún otro evento o porque el contenido y otra información se carga a través de AJAX. En su mayor parte, la función de listo es el lugar correcto.

Answer 5

¿No podría haber problemas potenciales si un usuario envía una entrada a un evento de mouse o un evento de teclado antes de que se haya procesado toda la página? [este párrafo] se refiere a una secuencia de comandos NO usando ready()

En general, si se desea hacer referencia a un elemento de JavaScript debe haber sido ya analizado el elemento en cuestión, es decir, añadido a la Árbol DOM. Esto se aplica tanto si intentas adjuntar un controlador de eventos (con o sin jQuery), cambiar su configuración de CSS o lo que sea.

El manejador .ready() no espera a que la página entera a ser prestados , se espera a que la página sea "listo" para la manipulación JS en el sentido de que ha sido analizada y todo el árbol DOM tiene sido construido. En ese punto, la representación aún puede estar ocurriendo, por ejemplo, el contenido real de los elementos de imagen todavía podría descargarse solo parcialmente.

Sin embargo, es posible iniciar la manipulación de elementos de JavaScript antes (o sin) el .ready(), siempre que lo haga de un bloque de script que se incluye después el elemento (s) de que se trate en la página fuente, porque el navegador hace su análisis de arriba a abajo desde su fuente html. Un ejemplo:

<input type="text" id="input1"> 
<script> 
    // following will work, because "input1" already exists 
    $("#input1").change(function() { /* do something */ }); 

    // following will NOT work, because "input2" has not been parsed yet 
    $("#input2").change(function() { /* do something */ }); 
</script> 
<input type="text" id="input2"> 

Así que si por alguna razón usted tiene alguna pieza crítica de funcionalidad que se siente absolutamente necesario configurar antes .ready() se puede hacer algo como lo anterior.

también Tenga en cuenta que no es necesario la función .ready() en absoluto si se incluye la secuencia de comandos en la parte inferior del cuerpo, debido a que (al igual que con .ready()) en ese punto se han analizado todos los elementos.

Donde haces necesidad .ready() es de código en un archivo externo de JS si usted no puede estar seguro de que en la página se incluirá en el archivo. Si está incluido en la sección <head>, se ejecutará antes de analizar el resto del documento, por lo que deberá usar .ready().