¿Cuál es la diferencia entre?:
$(function(){
});
y
$(document).ready(function() {
});
Sé que esperan a que los componentes estén cargados, pero quisiera saber ¿por qué se escriben de manera diferente?.
Pregunta similar de SO en inglés: https://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions
Oficialmente no hay ninguna diferencia:
Esta función se comporta igual que
$(document).ready(), en el sentido de que debería usarse para envolver otras operaciones$()de tu página que dependan de que el DOM ya esté listo.
Puedes verlo en las fuentes:
rootjQuery = jQuery(document);
...
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
Sin embargo, técnicamente sí hay una diferencia que podría ser útil según las circunstancias: $(function() no se ejecutará si jQuery no se ha cargado correctamente, mientras que $(document).ready sí lo hará
Actualización: Tal como se menciona en los comentarios $(document).ready tampoco se ejecutará si jQuery no está cargado. Para conseguir un efecto similar (pero no idéntico) sin jQuery se puede usar window.onload.
Esta respuesta es una traducción de la original en inglés: https://stackoverflow.com/a/2662783/4574 (la última frase no estaba en el original)
Viendo que la pregunta data del año 2015. Hoy día hay una gran diferencia:
$(document).ready(function() {
});
ha sido declarado obsoleto en jQuery3 y muy probablemente desaparecerá en jQuery4.
Por lo tanto, para mantener el código actualizado, se recomienda empezar a usar desde ya:
$(function(){
});
en todo nuestro código.
Este cambio viene explicado con toda claridad en la API de jQuery:
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
$( handler ) $( document ).ready( handler ) $( "document" ).ready( handler ) $( "img" ).ready( handler ) $().ready( handler )As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with "document" which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.
Ver:
.ready()en la API de jQuery
JQuery ofrece varias maneras de adjuntar una función que se ejecutará cuando el DOM esté listo. Todas las sintaxis siguientes son equivalentes:
$( handler ) $( document ).ready( handler ) $( "document" ).ready( handler ) $( "img" ).ready( handler ) $().ready( handler )A partir de jQuery 3.0, sólo se recomienda la primera sintaxis; las otras sintaxis siguen funcionando pero están obsoletas. Esto se debe a que la selección no tiene relación con el comportamiento del método
.ready(), que es ineficiente y puede conducir a suposiciones incorrectas sobre el comportamiento del método. Por ejemplo, la tercera sintaxis funciona con "documento" que no selecciona nada. La cuarta sintaxis espera que el documento esté listo, pero implica (incorrectamente) que espera que las imágenes estén listas.
En conclusión: la forma recomendada desde jQuery3 es:
$(function() {
// Handler for .ready() called.
});
Se puede consultar también las siguientes preguntas:
Según la documentación:
jQuery( callback ): Enlaza una función a ser ejecutada cuando el DOM haya finalizado su carga. El comportamiento es como
$().ready()y deberá ser usado para encapsular otras operaciones que dependan del que el DOM esté cargado.
Mientras que:
.ready( handler ): Especifica una función a ejecutar cuando el DOM está completamente cargado.
Si se ejecuta después de cargado el DOM, su función (normalmente anónima) será ejecutada de inmediato.
Ambos métodos son sinónimos. El uso de uno u otro es cuestión de que lo prefieras. Yo por ejemplo me gusta mucho el primero pues como lo mencionan es el uso corto.
Lo recomendable es que utilices el alias jQuery para obtener el comportamiento deseado siempre en tus plugins o componentes (no importa el método que emplees), ejemplos:
jQuery(function( $ ) {
// Tú código usando aquí el alias «$».
});
jQuery( document ).ready(function( $ ) {
// Código usando el símbolo «$» (como comúnmente) aquí.
});
Esto también es equivalente:
$(document).on('ready',function() {
});
Personalmente recomiendo usar por defecto el método on, y para el caso del metodo ready recomiendo no usarlo, y en su reemplazo mantener el orden de la ejecución de los scripts/funciones cuando sepas que los recursos (elementos/variables, app.js) ya existen en el contexto actual, y/o ejecutar esos mismos script/funciones en callbacks.
