Différences

Ci-dessous, les différences entre deux révisions de la page.

--- devweb:javascript [18-03-2014 23:17]
edmc73
+++ devweb:javascript [30-06-2016 10:17] (Version actuelle)
edmc73
@@ Ligne 82: / Ligne 82: @@
     [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);</code>
 In summary, if you have asynchronous functions that you want to execute syncronously, use callbacks, and if you have synchronous functions that you want to execute asynchronously, use timeouts.
+==== Exemple plus complexe ====
+Supposons 4 fonctions qui exécutent de l'ajax. On veut exécuter une 5ème fonction uniquement lorque les 4 autres auront bien reçu leur réponse ajax
+<code javascript>
+function update_var1(){
+  updated_var1=false;
+  $.ajax({...}).done(function(){
+    // du code
+    updated_var1=true;
+  });
+}
+</code>
+Ici on sait que tant que la variable updated_var1 est false, la ré^pnse ajax n'a pas été reçu.
+Comme on a 4 fonctions, on va créer une fonction regroupant tout ça avec un callback
+<code javascript>
+function update_all_var(callback){
+  update_var1();
+  update_var2();
+  update_var3();
+  update_var4();
+  var interval = setInterval(function () {
+    if(updated_var1 && updated_var2 && updated_var3 && updated_var4){
+      clearInterval(interval);
+      callback();
+    }
+  }, 100);
+}</code>
+Plutot que de faire une boucle infini qui fait généralement planter le navigateur, on utilise un setInterval qui va ici exécuter une fonction anonyme toutes les 100ms.\\
+Si nos 4 variables updated... sont true, alors nos 4 appels ajax ont répondu, on arrête l'exécution de l'interval et on exécute la fonction callback.
+Y'a plus qu'a inclure ce code dans le main
+<code javascript>
+update_all_var(function(){
+  update_resultat();
+});
+</code>
@@ Ligne 88: / Ligne 128: @@
   * https://github.com/matthieua/WOW Permet d'animer l'affichage d'éléments qui apparaissent lors d'un scroll
+===== Réécrire l'url sans recharger la page =====
+<code javascript>
+if(history.pushState)
+  history.pushState({}, '', $(this).attr("href"));
+</code>
+===== Les prototypes =====
+http://blog.xebia.fr/2013/06/10/javascript-retour-aux-bases-constructeur-prototype-et-heritage/
+===== URL et paramètre =====
+https://www.creativejuiz.fr/blog/javascript/recuperer-parametres-get-url-javascript
+<code javascript>
+function $_GET(param) {
+	var vars = {};
+	window.location.href.replace( location.hash, '' ).replace(
+		/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
+		function( m, key, value ) { // callback
+			vars[key] = value !== undefined ? value : '';
+		}
+	);
+	if ( param ) {
+		return vars[param] ? vars[param] : null;
+	}
+	return vars;
+}
+</code>
+Avec cette fonction JavaScript, vous avez deux utilisations différentes :
+<code javascript>
+var name = $_GET('name'),
+    age = $_GET('age');
+</code>
+ou, méthode plus performante :
+<code javascript>
+var $_GET = $_GET(),
+    name = $_GET['name'],
+    age = $_GET['age'];
+</code>
+Bien sûr je me suis amusé à copier jusqu’au nom $_GET pour montrer que c’est possible. Mais pour des raisons de convention au sein d’un projet, notamment dans le cadre de l’utilisation de jQuery, il vous faudra certainement faire différemment. Il vous suffira alors de renommer toutes les occurences de $_GET en autre chose.
+Si jamais vous avez besoin de récupérer des valeurs complexes qui serait encodée dans l’URL (exemple avec le paramètre ?test=Hello, World!, utilisez la fonction decodeURI() ainsi :
+<code javascript>
+var deco_var = decodeURI( $_GET( 'test' ) );
+</code>

Outils pour utilisateurs

Outils du site

Différences

Outils de la page