[resolu] Methode setTimeout()

bonsoir à tous ...

je souhaite utilisé la méthode setTimeout pour 'retarder' une instruction lancée par un gestionnaire dévènement .
Donc au clic sur l'élément --> on change la valeur de l'attribut fill-opacity.
5 seconde plus tard une nouvelle instructions l'a remet à sa valeur initiale .

function init(evt) {
	var logo1 = document.getElementById('logo1');
	logo1.onclick = change_opacity;	
}

function change_opacity(evt) {
	//this.setAttributeNS(null,'fill-opacity','0.0');
	var cible = evt.target;
        cible.setAttribute('fill-opacity','0.0');    // code OK jusque là 

	var p1 = setTimeout("cible.setAttribute('fill-opacity','1.0');",5000);
}

les objets en question sont des éléments SVG , mais je n'utilise de toute façon que des méthodes "compatibles " DOM (1.2) ...enfin je crois !

Dans tous les cas çà ne marche pas du tout donc ...

J'ai repris le code proposé sur W3c School pour la syntaxe du "setTimeout" .
je ne comprends d'ailleurs pas la raison de la mettre dans une varaible !?

Mais est-ce la bonne méthode à utiliser ?
Est-ce que la syntaxe est correcte ?

merci de votre aide .

(ps j'avais testé avec this , l'attributiion de valeur avec setAttribute fonctionne, mais pas plus le setTimeout )
Modifié par kzone (02 Jan 2007 - 07:01)

Merci pour ton aide ....
je vais testé cela de suite !

J'oublie toujours en effet qu'une fonction n'est interpretée que lors de son appel... (ou non !?)
J'ai encore du mal d'ailleurs a en bien saisir les subtilités , comme lorsqu'il est préciser qu'au contraire de l'instruction function, le constructeur (de
fonction anonyme) Function() permet de construire et de compiler dynamiquent une fonction.

(la connaissance c'est ce qu'il reste quand on a tout oublier ) ... et je n'ai appremment rien oublier
Modifié par kzone (30 Dec 2006 - 00:40)

En fait, ces deux lignes sont équivalentes :

setTimeout("alert(1);", 1000);
setTimeout(new Function("alert(1);"), 1000);

La différence avec ceci :

setTimeout(function() {alert(1);}, 1000);

c'est que dans cette dernière solution, la fonction anonyme hérite de la portée dans laquelle elle est créée (dans ton exemple, la varible "cible" lui est accessible).

Si tu veux en savoir plus et que tu es motivé, je te conseille la lecture de l'article sur les "closures", donné en lien à la fin de mon tuto.

.... ben je l'ai déjà lu (ton tuto) ... parcouru serait plus exact car certain passage m'ont semblé un peu plus "ardu" , et me demande 200% d'attention ...mais je sais où m'addresser en cas de problème !
Mais mon classeur tutos 'JS d'Alsa' est en bonne place

j'ai malheureusement pas eu le temps de tester les codes que tu m'as proposé (cette nuit surement) , vu que je viens de réconfigurer mon PC ( avec l'officiel de Mandriva ) ...

Je vais tester les codes sur des éléments Html voir si la syntaxe est correcte , et ensuite la porter sur un doc SVG ...

merci ...je vais lire 'les closures" ...

Bon c'est pas encore çà , et je n'ai testé qu'avec une application
html .

function init() {
    var logo1 = document.getElementById('forme');
    logo1.onclick = texte;	
}

function texte(evt) {
	 // premiere modification de l'attribut value
	 // this est l'objet de l'evenement INPUT
	 // variable globale cible / evt definit la cible
	 cible = this;
     this.setAttribute("value","attendre 5 secondes");
	 
	 // this ne peut etre envoye en parametre ! 
	 // this se referent a l'evenement
	  	 
	 setTimeout("retarde()",5000);
}
function retarde() {
	//utilisation de la varaible globale
	cible.setAttribute("id","forme1");
	cible.setAttribute("value","auto-destruction !!!");
	
}

j'ai suivi ton exemple de sauvegarder la valeur de this dans une variable
globale ... et le code est OK
Mais je trouve ce moyen peu "élégant" ici , si je veux généraliser le code pour
tout élément sur lequel survient l'évènement et auquel on applique la propriété
onclick !

De plus je me sert pour une meme valeur (l'objet sur lequel survient l'évenement ) du mot clé this + une variable globale (sans compter evt ) , donc de 3 espaces mémoires

.... e je n'arrive pas à faire fonctionner la fonction anonyme en paramètre de setTimeout (). (mauvais paramètres sans doute

)

kzone a écrit :
j'ai suivi ton exemple de sauvegarder la valeur de this dans une variable globale

De quel exemple parles-tu ?

Pour la fonction anonyme, je t'ai préparé un exemple qui marche bien :

function linkClick() {
	var cible = this;

	cible.className = "actif";
	setTimeout(function() {cible.className = "";}, 2000);
}

function init() {
	document.getElementsByTagName("a")[0].onclick = linkClick;
}

window.onload = init;

Salut eldebaran..

et en premier Merci ..!

Cela fonctionne impeccable ...

Et mon erreur (totalement stupide ) , je mettais la valeur des mili-secondes dans les instructions de la fonction anonyme ( entre les accolades quoi ) ... et j'ai jamais trouvé l'erreur ..!

je devrais dormir un peu plus

ps me reste plus qu'à l'appliquer au svg , mais j'ai compris le principe du setTimeout()...
Modifié par kzone (02 Jan 2007 - 07:02)

kzone a écrit :
Salut eldebaran..

et en premier Merci ..!

Pas de problème, et tant mieux si ça marche.

Essaie de te motiver pour lire l'article sur les closures, je suis sûr que ça t'aidera à l'avenir.

j'ai commencé à les lire, mais je me perds un peu au niveau des prototypes et ohh
surprise un chapitre "setTimeout with function References "

là tu m'a bien aidé déjà ...mais va me falloir plusieurs lectures je crois