2014-07-14 3 views
0

Est-ce que quelqu'un a une expérience similaire? J'ai trouvé que jQuery n'a pas chargé le script dans l'ordre. Ci-dessous le script que j'ai appelé, je n'ai aucune idée de ce que l'on appelle la séquence du code. Dans le code, le fichier validation.js est appelé en premier, puis c_validation.js, mais dans la console Javascript de Chrome, le résultat du chargement du script est inversé. Est-ce causé par la taille du script? Comment puis-je forcer le chargement des scripts un par un?Comment charger un script externe dans l'ordre

$("#tab-4-content").load("/reg.php?id="+this.id+"&ads="+$(this).data('ads')+"&f="+$(this).data('file')+"&mid="+$(this).data('mid')); 
    var url = "http://mydomain.com/validation.js"; 
    $.getScript(url) 
    .done(function() { 
     console.log("Success load validation"); 
    }) 
    .fail(function() { 
     console.log("Failed load validation"); 
     }); 
    var url = "js/c_validate.js"; 
    $.getScript(url) 
     .done(function() { 
      console.log("Success load c_validate.js"); 
     }) 
     .fail(function() { 
      console.log("Failed load c_validate.js"); 
     }); 
    $.mobile.changePage("#tab-4"); 
    $("#terms").html("/dev/terms.inc.html"); 
}); // tab-3-content click 

XHR finished loading: GET "http://dev.mydomain.com/c_by_cat.inc.php?id=code". jquery.js:10306 
http://mydomain.com/validation.js js.php?id=code:92 
XHR finished loading: GET "http://dev.mydomain.com/js/c_validate.js?_=1405324184667". jquery.js:10306 
Failed load c_validate.js js.php?id=code:106 
XHR finished loading: GET "http://dev.mydomain.com/reg.php?id=3&ads=1&f=3.png&mid=2". jquery.js:10306 
Success load validation 
+0

Pourquoi voudriez-vous charger tous vos scripts avec $ .getScript? – adeneo

+0

Pourquoi n'utilisez-vous pas simplement les balises 'Script'? – christiandev

+0

Le script ne sera appelé que sur une page spécifique en fonction du visiteur clique dessus ou non. – Kelvin

Répondre

1

Cela se produit car vous exécutez des requêtes parallèles. Vous pouvez utiliser quelque chose comme ça:

var get_scripts_in_order = function(urls, def) { 
    if (def === undefined) { 
     def = $.Deferred(); 
    } 
    var url = urls.pop(); 
    if (url === undefined) { 
     def.resolve(); 
    } else { 
     $.getScript(url) 
      .done(function() { 
       get_scripts_in_order(urls, def); 
      }) 
      .fail(function() { 
       def.reject(url); 
      }); 
    } 
    return def.promise(); 
}; 

get_scripts_in_order(["script3.js", "script2.js", "script1.js"]) 
    .done(function() { 
     console.log("loaded all scripts"); 
    }) 
    .fail(function(url) { 
     console.log("fail: "+url); 
    }); 

Notez que l'ordre des URL est inversée en raison de .pop.

Il y a un plugin intéressant pour jQuery qui peut vous aider ainsi:

https://github.com/gnarf/jquery-ajaxQueue

Questions connexes