Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Dernière révision Les deux révisions suivantes | ||
devweb:javascript [11-03-2014 23:41] edmc73 |
devweb:javascript [12-05-2015 11:54] edmc73 |
||
---|---|---|---|
Ligne 12: | Ligne 12: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== Function synchrone ou asynchrone ===== | ||
+ | |||
+ | ==== Synchronous Functions ==== | ||
+ | |||
+ | |||
+ | Most functions in Javascript are synchronous. If you were to call several synchronous functions in a row | ||
+ | |||
+ | <code javascript> | ||
+ | doSomethingElse(); | ||
+ | doSomethingUsefulThisTime();</ | ||
+ | |||
+ | they will execute in order. doSomethingElse will not start until doSomething has completed. doSomethingUsefulThisTime, | ||
+ | |||
+ | ==== Asynchronous Functions ==== | ||
+ | |||
+ | Asynchronous function, however, will not wait for each other. Let us look at the same code sample we had above, this time assuming that the functions are asynchronous | ||
+ | |||
+ | <code javascript> | ||
+ | doSomethingElse(); | ||
+ | doSomethingUsefulThisTime();</ | ||
+ | The functions will be initialized in order, but they will all execute roughly at the same time. You can't consistently predict which one will finish first: the one that happens to take the shortest amount of time to execute will finish first. | ||
+ | |||
+ | But sometimes, you want functions that are asynchronous to execute in order, and sometimes you want functions that are synchronous to execute asynchronously. Fortunately, | ||
+ | |||
+ | ==== Callbacks ==== | ||
+ | |||
+ | Let's assume that we have three asynchronous functions that we want to execute in order, some_3secs_function, | ||
+ | |||
+ | Since functions can be passed as arguments in Javascript, you can pass a function as a callback to execute after the function has completed. | ||
+ | |||
+ | If we create the functions like this | ||
+ | |||
+ | <code javascript> | ||
+ | //do stuff | ||
+ | callback(); | ||
+ | }</ | ||
+ | then you can call then in order, like this: | ||
+ | |||
+ | <code javascript> | ||
+ | some_5secs_function(other_value, | ||
+ | some_8secs_function(third_value, | ||
+ | //All three functions have completed, in order. | ||
+ | }); | ||
+ | }); | ||
+ | });</ | ||
+ | |||
+ | ==== Timeouts ==== | ||
+ | |||
+ | |||
+ | In Javascript, you can tell a function to execute after a certain timeout (in milliseconds). This can, in effect, make synchronous functions behave asynchronously. | ||
+ | |||
+ | If we have three synchronous functions, we can execute them asynchronously using the setTimeout function. | ||
+ | |||
+ | <code javascript> | ||
+ | setTimeout(doSomethingElse, | ||
+ | setTimeout(doSomethingUsefulThisTime, | ||
+ | This is, however, a bit ugly and violates the DRY principle[wikipedia]. We could clean this up a bit by creating a function that accepts an array of functions and a timeout. | ||
+ | |||
+ | <code javascript> | ||
+ | for(var i = 0; i < functions.length; | ||
+ | setTimeout(functions[i], | ||
+ | } | ||
+ | }</ | ||
+ | This can be called like so: | ||
+ | |||
+ | <code javascript> | ||
+ | [doSomething, | ||
+ | In summary, if you have asynchronous functions that you want to execute syncronously, | ||
+ | |||
+ | ==== Exemple plus complexe ==== | ||
+ | |||
+ | Supposons 4 fonctions qui exécutent de l' | ||
+ | |||
+ | <code javascript> | ||
+ | function update_var1(){ | ||
+ | updated_var1=false; | ||
+ | $.ajax({...}).done(function(){ | ||
+ | // du code | ||
+ | updated_var1=true; | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | 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); | ||
+ | }</ | ||
+ | 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' | ||
+ | |||
+ | Y'a plus qu'a inclure ce code dans le main | ||
+ | <code javascript> | ||
+ | update_all_var(function(){ | ||
+ | update_resultat(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
===== Animation ===== | ===== Animation ===== | ||
Ligne 17: | Ligne 128: | ||
* https:// | * https:// | ||
+ | |||
+ | ===== Réécrire l'url sans recharger la page ===== | ||
+ | |||
+ | <code javascript> | ||
+ | if(history.pushState) | ||
+ | history.pushState({}, | ||
+ | </ | ||
+ | |||
+ | ===== Les prototypes ===== | ||
+ | |||
+ | http:// | ||
+ |