Cómo combinar varias funciones de jquery

Question

Si ve el código de jquery a continuación, verá el famoso $ (documento) .ready (función() { que inicia el script. Veo esto en casi todos los ejemplos de código de jquery en la red y estoy queriendo saber, si estoy ejecutando 5 funciones de código diferentes en un solo archivo, ¿necesito usar $ (documento). listo (función() { al comienzo de todos ellos?

Si no ¿cómo combino por ejemplo, el código siguiente en una página 3 veces, fingir que es de 3 códigos diferentes?

<script type="text/javascript" > 
$(document).ready(function(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
     }); }, 2000); 
}); 
</script> 

Answer 1

Debe intentar no poner demasiado dentro de los bloques de doc ready. Sí, puedes tener muchos de ellos, pero me quedo con uno, si es que hay alguno. También puede poner su script justo antes de la etiqueta de cierre del cuerpo sin la necesidad de documentos listos.

Aconsejo romper el código en funciones separadas. De esta forma, puede reutilizarlos en toda su página en varias etapas. A continuación, utilice el bloque de doc ready para activar una llamada a la función init de esa página.

También puede utilizar $(function(){}); como un atajo a $(document).ready(function(){});

<script type="text/javascript" > 
$(function(){ 
    init(); 
}); 

function init(){ 
    someFunction(); 
    //other init stuff 
} 

function someFunction(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
    }); }, 2000); 

} 
</script> 

Answer 2

no lo necesita, simplemente colóquelo en una sola y active todas las funciones desde allí;

<script type="text/javascript" > 
$(document).ready(function(){ 
     func1(); 
     func2(); 
     ... 
}); 
</script> 

Answer 3

En primer lugar, se puede acortar de que a:

<script type="text/javascript" > 
    jQuery(function() { 
     ... 
    }); 
</script> 

En segundo lugar, si desea que sus secuencias de comandos para ejecutar cuando la página se terminó de cargar, entonces sí, debe ponerlos en una función jQuery/document.ready(). Puede ponerlos todos en el mismo bloque jQuery(function() { }) y se ejecutarán en orden, no es necesario separarlos.

Para ampliar sobre el funcionamiento de function() {} bloques:

jQuery(/* do something */); 

significa "al cargar la página, hacer algo". Ese "hacer algo" es una función. Puede pasar directamente a una función como esta:

function myFunction() { 
    ... 
} 

jQuery(myFunction); 

Se define una función "myFunction" y dijo jQuery para ejecutarlo al cargar la página. Tenga en cuenta que acaba de pasar la función a jQuery, sin (). Si escribiera jQuery(myFunction()); en su lugar, eso ejecutaría myFunction() inmediatamente, y todo lo que devuelve myFunction() se colocaría en jQuery(), y eso se ejecutaría al cargar la página. Es un poco diferente de los lenguajes como PHP, ya que en PHP es el comportamiento deseado ejecutar todo inmediatamente, en Javascript eso no es necesariamente así. En PHP no puede pasar la función en sí, en Javascript puede. Las funciones en JavaScript actúan más como variables.

lo que se suele hacer es "compensar una función sobre la marcha", que contiene algún bloque de código que desea ejecutar en un momento posterior:

jQuery(function() { 
    foo(); 
    bar(); 
}); 

En este caso estás pasando una función como bueno, solo que lo inventó sobre la marcha y la función no tiene nombre. jQuery retendrá esta función hasta que se cargue la página, y en ese momento se ejecutará. Dentro de esa función puedes hacer tantas cosas como quieras.

Answer 4

El problema es que no entiende qué es el evento listo y por qué lo necesita.

Imagina que una página aún no se ha cargado completamente e intentas cambiar algo con javascript y dado que el código del elemento HTML que intentas manipular aún no está cargado, las cosas no funcionan.

El evento listo resuelve este problema. Cualquier función (la mayoría de las veces una sola anonymous function) que se vincula al el evento listo se ejecuta tan pronto como todos elements in the document están listos para ser atravesados ​​y manipulados. Se considera una mala práctica tener javascript en línea. Si desea que un evento (clic, hover, etc.) funcione en su página, debe llamarlo dentro de la función $ (document) .ready().

Y como una página solo se carga una vez, cualquier función que esté ligada al evento listo solo se llamará una vez. Por lo tanto, no tiene mucho sentido enlazar funciones múltiples al evento listo. Puedes hacer todo en esa única función que unes a ella. Sin embargo, no causará ningún daño (siempre y cuando comprenda lo que está haciendo) ya que cada función que haya vinculado al evento listo se llamará una vez que el DOM esté listo.

No entiendo lo que estás intentando lograr ejecutando el mismo código cinco veces ... así que no puedo ayudarte con eso.

Espero que esta explicación lo ayude a resolver su problema real.

Answer 5

creo que el cartel original fue preguntando si él debe hacer esto:

<script> 
$(document).ready(function(){ 
     func1(); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
     func2(); 
}); 
</script> 

O si él puede hacer esto:

<script> 
$(document).ready(function(){ 
     func1(); 
     func2(); 
}); 
</script> 

En el ejemplo más adelante, hay un guión y una documento preparado declaración. Mucho más limpio. Creo que la respuesta es sí, puedes hacer lo posterior sin ningún problema.