Fonction récursive dans une classe

Version imprimable

Bonjour, voilà mon soucis, j'ai décidé de passer mes script Js en orienté objet pour faciliter la maintenance, mais j'ai certaines difficultés avec une classe :

La classe en question :

Code:

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
function CFadingMenu()
{
//Initialisation des propriétés d'instance
this.isOver = false;
this.transparence = 0;
};
//Définition des méthodes de l'objet
CFadingMenu.prototype.downOpacity = function()
{
    if (this.isOver == false)
    {
        document.getElementById("menugris").style.filter = "alpha(opacity="+this.transparence+")";
        document.getElementById("menugris").style.opacity = this.transparence / 100;
        if (this.transparence <= 100)
        {
            this.transparence += 10;
            setTimeout("this.downOpacity();",50);
        }
    }
};
 
CFadingMenu.prototype.upOpacity = function()
{
    if (this.isOver == true)
    {
        document.getElementById("menugris").style.filter = "alpha(opacity="+this.transparence+")";
        document.getElementById("menugris").style.opacity = this.transparence / 100;
        if (this.transparence >= 0)
        {
            this.transparence = this.transparence - 10;
            setTimeout("this.upOpacity();",50);
        }
    }
};
 
CFadingMenu.prototype.mouseOver = function()
{
    this.isOver = true;
    this.upOpacity();
};
 
CFadingMenu.prototype.mouseOut = function()
{
    this.isOver = false;
    this.downOpacity();
};

Me sort un message d'erreur du genre

Code:

1
2
this.downOpacity is not a function
[Break on this error] setTimeout("this.downOpacity();",50);

Alors je ne comprend pas où se trouve l'erreur, j'ai bien essayé de passer l'objet en paramètre mais ça n'a pas arrangé les choses :S

Merci !

30/09/2010, 17h27
Bovino

Tu perds manifestement la référence à this au cours de ton script.
30/09/2010, 19h04
marcha
Comme le dit Bovino, tu perds la référence au this

C'est du au fait que l'appel de la fonction upOpacity se
fait depuis un autre contexte (celui du timer)

Tu devrais pouvoir t'en sortir avec la closure suivante:
Code:

1 2 3 setTimeout(function(obj) { return obj.upOpacity; }(this), 50);
A tester

Je n'avais pas développé plus ma réponse parce qu'en dehors de ce cas, je pense que d'autres se cachent dans d'autres parties du code, en particulier les appels à
Code:

1 2 3 4 5 6 7 8 9 10 11 CFadingMenu.prototype.mouseOver = function() { this.isOver = true; this.upOpacity(); }; CFadingMenu.prototype.mouseOut = function() { this.isOver = false; this.downOpacity(); };
dont je subodore qu'ils proviennent d'un code du type

Code:

HTMLElement.onmouseover = function(){...};

et pour lesquels il faut aussi passer la référence à this.

Ceci dit, personnellement, j'utilise une autre méthode : j'affecte le this à une variable (habituellement that) que j'affecte au this de la fonction avec apply :
Code:

1 2 3 4 5 var that = this; var monElem = document.getElementById('element'); monElem.onmouseover = function(){ that.maFonction.apply(that); }

Citation:
Envoyé par Bovino
Ceci dit, personnellement, j'utilise une autre méthode : j'affecte le this à une variable (habituellement that) que j'affecte au this de la fonction avec apply :
Code:

1 2 3 4 5 var that = this; var monElem = document.getElementById('element'); monElem.onmouseover = function(){ that.maFonction.apply(that); }
L'exemple que tu donnes ne nécessite pas l'usage d'apply :-(
that.maFonction() suffit. apply est nécessaire que si l'on a
la fonction sous forme d'une référence (qu'on a pas son nom)

Explications par cet exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function MonObj() { this.a = 'test'; var that = this; window.onclick = function() { that.toto(); // suffisant that.toto.apply(that); // redondant var func_ref = MonObj.prototype.toto; // simule une référence pour mon exemple func_ref.apply(that); // apply nécessaire car that.func_ref() impossible } } MonObj.prototype.toto = function() { alert(this.a); } var x = new MonObj();

01/10/2010, 11h48
Bovino

Citation:

Envoyé par marcha

L'exemple que tu donnes ne nécessite pas l'usage d'apply :-(

:cry:
Promis, demain, j'arrête l'alcool... :(

et puis pour mémoire, cette syntaxe, qui fonctionne aussi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
 
function truc(){
	this.prop = 0;
}
 
truc.prototype.methode = function(){
	with(this){
		if (prop < 10){
        		prop++;
			alert(prop);
		        setTimeout(function(){methode()},50);
		}
	}
}
 
var bidule=new truc().methode();
 
</script>

Après avoir bidouillé mon code j tombe sur ceci qui me semble pas trop mal, ne m'affiche aucune erreur à l'exécution

Code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function CFadingMenu()
{
//Initialisation des propriétés d'instance
with (this)
{
    isOver = false;
    transparence = 100;
}
};
//Définition des méthodes de l'objet
CFadingMenu.prototype.downOpacity = function()
{
    with (this)
    {    
        if (isOver == false)
        {
 
            if (transparence <= 100)
            {
                document.getElementById("menugris").style.filter = "alpha(opacity="+transparence+")";
                document.getElementById("menugris").style.opacity = transparence / 100;
                transparence += 10;
                setTimeout( "function(){downOpacity()}" , 50 );
            }
        }
    }
};
 
CFadingMenu.prototype.upOpacity = function()
{
    with (this)
    {
        if (isOver == true)
        {
            if (transparence > 0)
            {
                document.getElementById("menugris").style.filter = "alpha(opacity="+transparence+")";
                document.getElementById("menugris").style.opacity = transparence / 100;
                transparence -= 10;
                setTimeout( "function(){downOpacity()}" , 50 );
            }
        }
    }
};
 
CFadingMenu.prototype.mouseOver = function()
{
    with (this)
    {
        isOver = true;
        upOpacity();
    }
};
 
CFadingMenu.prototype.mouseOut = function()
{
    with (this)
    {
        isOver = false;
        downOpacity();
    }
};

Par contre toujours un problème avec le settimeout, la fonction fait son office une première fois, mais aucune récursivité par la suite.

Aucun traking des variables Js sur firebug si?

01/10/2010, 13h14
javatwister

as-tu essayé d'enlever les quotes dans le setTimeout?
01/10/2010, 13h22
Bovino

Citation:

Envoyé par javatwister

as-tu essayé d'enlever les quotes dans le setTimeout?

Oui, c'est soit

Code:

setTimeout( function(){downOpacity()} , 50 );

soit

Code:

setTimeout( "downOpacity()" , 50 );

avec une grosse préférence pour la première notation.
Dans ce que tu proposes, tu ne fais qu'ajouter une fonction anonyme dans le contexte JavaScript, mais cette fonction n'est jamais appelée. En résumé, c'est comme si tu avais directement dans ton code

Code:

function(){downOpacity()}

D'autre part, je ne préconise pas l'utilisation de with.
Déjà, parce que ça affecte les performances, mais surtout, parce que si on imagine que tu aies donné à ton objet une propriété "document" (ce qui est à éviter, bien sûr, mais ça peut arriver involontairement), du coup, tu te retrouveras avec une erreur puisque

Code:

document.getElementById("menugris").style.filter = "alpha(opacity="+transparence+")";

par exemple sera interprété comme

Code:

this.document.getElementById("menugris").style.filter = "alpha(opacity="+transparence+")";
01/10/2010, 13h58
Aloneghost

Effectivement, sans les quote, le comportement change radicalement et tout fonctionne.

Il s'avère que j'ai de grosses lacunes sur l'objet à force de m'obstiner à tout faire en procédural... Je vais essayer de me taper un bon gros tuto ou deux sur l'objet et sur les notions Js qui m'échappent comme les fonctions anonyme dont je ne saisie pas bien l'utilisation.

Je vous remercie de votre intervention! Vous êtes tous super !
01/10/2010, 14h06
SpaceFrog

Beef je rajouterais une troisième syntaxe :

Code:

setTimeout( downOpacity , 5000 );
01/10/2010, 14h16
javatwister

méthode qui en théorie a autant de chance de fonctionner, Spafy... mais dans la réalité...
01/10/2010, 14h34
SpaceFrog

elle fonctionne car setTimeout attend en argument une fonction ou un string
La seule chose est qu'il ne faut pas avoir d'arguments à passer à la fonction
car las arguments de setTimout ne sont pas reconnus de la même manière par les navigateurs???
01/10/2010, 14h53
Bovino

Citation:

Envoyé par SpaceFrog

car las arguments de setTimout ne sont pas reconnus de la même manière par les navigateurs???

A part pour IE, tu peux passer les paramètres de la fonctions en arguments supplémentaires :

Code:

setTimeout(uneFonction,100,"Param 1","Param 2",...,"Param n");

Malheureusement, pour IE, si le troisième paramètre est présent, il correspond à l'attribut "language" correspondant au code du premier paramètre :(
01/10/2010, 15h16
SpaceFrog

Citation:

A part pour IE, tu peux passer les paramètres de la fonctions en arguments supplémentaires :

d'ou la technique de closure pour passer les arguments et rendre le truc crossbrowser.
01/10/2010, 15h18
marcha

Citation:

Envoyé par SpaceFrog

d'ou la technique de closure pour passer les arguments et rendre le truc crossbrowser.

+1
01/10/2010, 15h22
Bovino

Citation:

Envoyé par SpaceFrog

d'ou la technique de closure pour passer les arguments et rendre le truc crossbrowser.

Oui, là-dessus on est d'accord ! :mrgreen: