Fonction récursive dans une classe

**Aloneghost** · 30/09/2010, 17h20

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 :

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
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 :

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

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 !

**Bovino** · 30/09/2010, 17h27

Tu perds manifestement la référence à this au cours de ton script.

**marcha** · 30/09/2010, 19h04

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 :

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

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

A tester

**Bovino** · 30/09/2010, 20h58

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 :

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

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 :

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

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 :

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

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

**marcha** · 01/10/2010, 10h21

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 :

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

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 :

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
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();

**Bovino** · 01/10/2010, 11h48

Envoyé par marcha

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

Promis, demain, j'arrête l'alcool...

**javatwister** · 01/10/2010, 12h30

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

Code :

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
<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>

**Aloneghost** · 01/10/2010, 13h03

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 :

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
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?

**javatwister** · 01/10/2010, 13h14

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

**Bovino** · 01/10/2010, 13h22

Envoyé par javatwister

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

Oui, c'est soit

Code :

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

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

soit

Code :

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

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 :

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

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 :

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

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

par exemple sera interprété comme

Code :

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

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

**Aloneghost** · 01/10/2010, 13h58

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 !

**SpaceFrog** · 01/10/2010, 14h06

Beef je rajouterais une troisième syntaxe :

Code :

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

setTimeout( downOpacity , 5000 );

**javatwister** · 01/10/2010, 14h16

méthode qui en théorie a autant de chance de fonctionner, Spafy... mais dans la réalité...

**SpaceFrog** · 01/10/2010, 14h34

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???

**Bovino** · 01/10/2010, 14h53

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 :

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

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

**SpaceFrog** · 01/10/2010, 15h16

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.

**marcha** · 01/10/2010, 15h18

Envoyé par SpaceFrog

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

+1

**Bovino** · 01/10/2010, 15h22

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 !

Fonction récursive dans une classe

JavaScript

Discussions similaires

Partager

Partager