Digamos que hay una funcionalidad de tu sitio web que sólo se usa el 5% del tiempo. Esa funcionalidad requiere de HTML, CSS y JavaScript para funcionar. Por lo que eliges Ajax para resolver las veces que esa funcionalidad sea utilizada. Son tres los pedidos Ajax que vamos a necesitar, y habrá que esperar que los tres se resuelvan. ¿Cuál es la mejor manera de hacer esto?
Las llamadas Ajax en jQuery están provistas de callbacks:
- $.ajax({
- statusCode: {
- url: "/feature",
- success: function() {
- }
- }
- });
También puedes usar un atajo, con el método $.get()
:
- $.get("/feature/").done(function() {
- });
Pero tenemos tres pedidos Ajax que necesitamos resolver, y queremos esperar a que los tres finalicen antes de hacer nada. Aquà hay otra opción:
- $.get("/feature/", function(html) {
- $.get("/assets/feature.css", function(css) {
- $.getScript("/assets/feature.js", function() {
- $("<style />").html(css).appendTo("head");
- $("body").append(html);
- });
- });
- });
Esto espera hasta que todo este resuelto antes de agregar nada a la página. Para el momento en que el usuario vea algo, ya va a estar todo resuelto.  El problema con esto es que es lento. Un pedido, se resuelve, siguiente pedido, se resuelve, y asÃ.
Hay una manera de hacerlo más rápido, con los tres pedidos en paralelo.
Vamos a usar el método de jQuery $.when()
, que toma una lista de objetos y los devuelve en un simple callback.
- $.when(
- // objeto,
- // objeto,
- // objeto
- ).then(function() {
- // lo que necesites que suceda
- });
Asà que nuestro callback se reescribirÃa asÃ:
- $.when(
- $.get("/feature/", function(html) {
- globalStore.html = html;
- }),
- $.get("/assets/feature.css", function(css) {
- globalStore.css = css;
- }),
- $.getScript("/assets/feature.js")
- ).then(function() {
- $("<style />").html(globalStore.css).appendTo("head");
- $("body").append(globalStore.html);
- });
Eso es todo ¡Esperamos que  te sea de utilidad!
Fuente original del artÃculo: CSS-Tricks
Traducción realizada por elWebmaster.com
Comentarios recientes