Javascript, setInterval

Version imprimable

Bonjour,
J'ai un soucis sur l'une de mes applications Javascript. Au début tout va bien, le code marche pas de soucis, mais d'un seul coup il ne fait plus ce que je lui demande, il excute une fonction ou une action qu'il ne devrait pas.
Lorsque je fais un Onmousseover, je souhaite faire descendre progréssivement un élément de mon menu.
De même pour le Onmousseout, qui lui est censé faire remonter cet élément à sa position d'origine.

Voici mes éléments du menu.

Code:

1
2
3
4
5
6
<li>
<a id="PaquesBeau" onmouseover="ExecToggle(this.id);" onmouseout="ExecToggle(this.id);" href="/fr/evenements/paques/beau.shtml" title="à la rencontre du beau" class="beau">à la rencontre du beau</a>
</li>
<li>
<a id="PaquesFete" onmouseover="ExecToggle(this.id);" onmouseout="ExecToggle(this.id);" href="/fr/evenements/paques/fete.shtml" title="vers des destinations conviviales" class="fete">vers des destinations conviviales</a>
</li>

Pour ce qui est du javascript j'utilise trois fonctions que voici.

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
var i = Array();
var position = Array(); 
function ToggleBottom(ToggleID)
{
    if(document.getElementById(ToggleID) && i[ToggleID]<30)
    {
        i[ToggleID]+=1;
        document.getElementById(ToggleID).style.top=i[ToggleID]+"px";
 
        if(i[ToggleID] == 30)
        {
            clearInterval(ExecInter);
            position[ToggleID] = "top";
        }
    }
}
 
function ToggleTop(ToggleID)
{
    if(document.getElementById(ToggleID) && i[ToggleID]>0)
    {
        i[ToggleID]-=1;
        document.getElementById(ToggleID).style.top=i[ToggleID]+"px";
        if(i[ToggleID] == 0)
        {  
            clearInterval(ExecInter);  
            position[ToggleID] = "bottom";          
        }
    }
}
 
function ExecToggle(ToggleID) 
{   
    if(position[ToggleID] == null || position[ToggleID] == "bottom")
    {
        i[ToggleID] = 0;
        ExecInter = setInterval(function(){ToggleBottom(ToggleID);}, 25);
    }
    if(position[ToggleID] == "top")
    {
        i[ToggleID] = 30;
        ExecInter = setInterval(function(){ToggleTop(ToggleID);}, 25);
    }
}

Si vous pouviez m'aider à faire ne sorte que ce code marche Je ne cherche pas à faire quelque chose de compliqué, mais j'aimerais ne pas utiliser une fonction par élément du menu.

Merci d'avance

20/02/2008, 11h46
HumanTool

salut,
je crois que les appels à setInterval (et setTimeOut) doivent être du genre

Code:

setInterval("MaFonction", 1000);

le guillemets sont nécessaire.

Non étant donné que je passe des paramètres dans ma fonction lors du setinterval, il faut mettre ce que j'ai mis à l'intérieur, cependant j'ai pas mal avancé sur le sujet, maintenant seul firebug arrive à faire marcher la fonction à l'envers.. Magie ? sorcellerie ? je ne saurais y répondre.

Cependant je pense avoir fait quelque chose de "potable", pas très propre et pas très optimisé, mais le javascript n'est pas mon dada.

Je post mon javascript

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
63
64
65
66
67
68
69
70
71
72
73
var i = Array();
var position = Array(); 
var ExecInter = Array();
var ExecThis = Array();
var ToggleMax = Array();
var ToggleMin = Array();
 
 
/*Fais descendre l'image */
function ToggleBottom(ToggleID)
{
    if(document.getElementById(ToggleID) && i[ToggleID]<ToggleMax[ToggleID])
    {
        i[ToggleID]+=1;
        document.getElementById(ToggleID).style.top=i[ToggleID]+"px";
 
        if(i[ToggleID] == ToggleMax[ToggleID])
        {
            clearInterval(ExecInter[ToggleID]);
            ExecThis[ToggleID] = false;  
        }
    }
}
/* Fais remonter l'image */
function ToggleTop(ToggleID)
{
    if(document.getElementById(ToggleID) && i[ToggleID]>ToggleMin[ToggleID])
    {
        i[ToggleID]-=1;
        document.getElementById(ToggleID).style.top=i[ToggleID]+"px";
        if(i[ToggleID] == ToggleMin[ToggleID])
        {  
            clearInterval(ExecInter[ToggleID]);  
            ExecThis[ToggleID] = false;        
        }
    }
}
/* Execution du mouvement de l'image */
function ExecToggle(ToggleID,ToggleSize) 
{   
    ToggleMin[ToggleID] = ToggleSize[0];
    ToggleMax[ToggleID] = ToggleSize[1];
 
    if(position[ToggleID] == null || position[ToggleID] == "bottom")
    {
        if(ExecThis[ToggleID] == true)
        {
            clearInterval(ExecInter[ToggleID]);
        }
        else
        {            
            i[ToggleID] = ToggleMin[ToggleID];
            ExecThis[ToggleID] = true;
        }
        position[ToggleID] = "top";
        ExecInter[ToggleID] = setInterval(function(){ToggleBottom(ToggleID);}, 5);
    }
    else if(position[ToggleID] == "top")
    {
        if(ExecThis[ToggleID] == true)
        {
            clearInterval(ExecInter[ToggleID]);
        }
        else
        {            
            i[ToggleID] = ToggleMax[ToggleID];
            ExecThis[ToggleID] = true;
        }
        position[ToggleID] = "bottom";  
        ExecInter[ToggleID] = setInterval(function(){ToggleTop(ToggleID);}, 5);
    }
 
}

Merci quand même en espérant que personne n'aura plus ce soucis :)

20/02/2008, 14h09
HumanTool

Rien n'empêche de faire :

Code:

setInterval("MaFonction(" + MonParametre + ")", 1000);
20/02/2008, 14h40
GoTrUnKo

Ca ne voulait pas marcher non plus, je n'ai pas compris pourquoi, mais la seule fois où ca a marché était la méthode que j'ai utilisé ^^'