Discussion :

[odissey]

Bonjour, je souhaite en fait créer une petite animation en javascript. Cette animation sera incorporée en une fonction Animation().

Cette animation aura pour but de creer un voile noir qui va se degrader sur la page, ensuite afficher une div qui se placera au milieu de la page.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
function Animation (){
 
var middle_x= parseInt(window.innerWidth / 2)
var middle_y= parseInt(window.innerHeight / 2)
 
var voile = document.createElement("div")
voile.setAttribute("class", "voile_noir")
voile.style.width = window.innerWidth + 'px'
voile.style.height = window.innerHeight + 'px'
 
// Fonction qui va degrader le voile
 
var degradeVoile = function () {
 
 if(typeof opVoile_i == 'undefined')
 {
  // Point d'entree obligatoire car opVoile_i est le curseur de l'animation
  opVoile_i = 0
  // On cree le setTimeout de l'animation
 
 } else {
 // Controle du curseur
   if(i >= 100) {
      // Fin de l'animation
      clearTimeout(timer1)
      delete opVoile_i
   } else {
   opVoile_i ++
   }
 }
 
  timer1 = setTimeout(degradeVoile, 10)
 // L'opacite du voile est l'image du curseur c'est un pourcentage
 opVoile = opVoile_i * 100
 // Application de l'opacite
 voile.style.opacity = opVoile / 100
 voile.filter= 'alpha(opacity=' + opVoile + ')'
 
}
 
 degradeVoile()
 ////// ******* ======>>> COMMENT EST-CE POSSIBLE D'EXECUTER DU CODE UNE FOIS QUE LA FONCTION A FINI DE TIMEOUTER??? A PART UN WHILE SUR UNE VARIABLE DE TEST ???
 alert("c'est bel et bien la fin... :s")
 
 
}

Comment est-il possible d'executer de maniere synchrone la boucle de timeout ? Merci d'avance.

[odissey]

je m'up

[abertaud]

Je sais pas si ce sera pour tout le monde pareil, mais je ne comprends pas ta question.

[marcha]

////// ******* ======>>> COMMENT EST-CE POSSIBLE D'EXECUTER DU CODE UNE FOIS QUE LA FONCTION A FINI DE TIMEOUTER??? A PART UN WHILE SUR UNE VARIABLE DE TEST ???

Tu place le code à exécuter après la ligne où tu fais clearTimeout

Sinon qu'entends-tu par synchrone ? Le fait d'avoir une forme de boucle
qui monopoliserait tout le cpu pour exécuter du code après celle-ci ? :-)

[odissey]

Pardon pour la réponse tardive. Non il ne s'agit pas d'une boucle qui monopoliserait tout le CPU, je voudrais simplement que le setTimeout agisse comme une boucle. Or, et vous pourrez le constater si vous essayez ce code, si vous placé une instruction après l'appel de la fonction, l'instruction va être exécutée une fois que l'appel aura été fait, et non pas à la fin de l'appel de la fonction. Suis-je un peu plus clair? Donc voila le soucis, j'aimerais que la fonction (qui contient un setTimeout) puisse suggérer à l'interpréteur de terminer son exécution avant de passer à l'instruction suivante.

[odissey]

Bonjour, je souhaite en fait créer une petite animation en javascript. Cette animation sera incorporée en une fonction Animation().

Cette animation aura pour but de creer un voile noir qui va se degrader sur la page, ensuite afficher une div qui se placera au milieu de la page.



Comment est-il possible d'executer de maniere synchrone la boucle de timeout ? Merci d'avance.

[odissey]

S'il-vous-plait,

quelqu'un aurait une réponse ou une piste pour ce problème là?

Je vous remercie d'avance

[madevilts]

Quel interet de faire un settimeout synchrone ?

C'est la fonction du settimeout qui fait avancer ton degradé, et comme ça, pas besoin de synchro

[odissey]

Merci pour ta réponse Madevilts
Je précise que mon souhait est de pouvoir executer certaines actions APRES le dégradé. Il n'y a pas de problème avec le setTimeout en particulier.

Je m'explique:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 function Animation()
 {
     degradeObjet1()
     degradeObjet2ApresObjet1()
     afficheCoucheApresDégradé()
 }

[marcha]

Ce que tu cherches à faire n'est tout simplement pas faisable en javascript.

Javascript travaille avec les évènements, il faut s'y adapter dans la manière
de coder. Il n'est pas multitâche, donc si tu fais une boucle d'attente tu
empêche tout autre exécution de fonctions js dans la même page.

Pour exécuter du code après ton animation tu dois le placer là où tu as mis
le clearTimeout dans ton exemple.

[odissey]

Je te remercie pour ta réponse qui éclaire ma lanterne de newbie je vais essayer de m'y faire. Ou je vais tout simplement arrêter le javascript... Vivement le javascript 2?? Ok je sors -> []

[marcha]

Il te suffit d'écrire les choses à peine differemment

Tu peux passer une fonction à la fonction degradeVoile pour qu'elle
l'appelle en fin de traitement, voici un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
var degradeVoile = function (onEnd) {
   ...
   if(i >= 100) {
      // Fin de l'animation
      clearTimeout(timer1)
      delete opVoile_i
      onEnd();
   }
   ...
}
 
 degradeVoile( function() { alert("c'est bel et bien la fin... :s"); } );