[setTimeOut] Multiples retardateurs

**speedev** · 31/07/2006, 11h01

Mais il n'y aura qu'une seule exécution pour chaque objet...c'est ça que je ne comprenais pas dans ton approche.

Chaque image n'est traitée qu'une seule fois.
Donc pas besoin de vérifier ceci.

**speedev** · 31/07/2006, 11h04

Envoyé par FremyCompany

EDIT:
Le problème avec votre methode, c'est que vous allez mettre des setInterval dans des setTimeout, déclanché par des procédures... et vous allez finir par ne plus savoir changer quoique ce soit... Mieux vaut une solution simple qu'une solution basée sur la multiplicité des opérations...

Ha oui là c'est sûr que je me suis mal embarqué avec un setTimeOut en plus...mais ça reste léger.
1-->traitement
2-->setTimeOut espacement traitement
3-->setInterval espacement mouvement image
4-->exécution mouvement

C'est encore relativement simple niveau code.

**speedev** · 31/07/2006, 11h08

Eric c'est Ok merci ça marche...pfff j'espaçais mes traitement de 0.0002 millièmes de secondes....fallait pas que je m'étonne si je voyais aucun espacement dans les mouvement d'images....

Bon et bien ça marche! Je vais surement revenir dessus d'ici peu pour du fignolage.

**Eric Berger** · 31/07/2006, 11h43

c'est rien... c'est un plaisir de participer à la résolution d'un problème bien expliqué

FremyCompany

Je n'ai jamais utilisé ce genre de syntaxe (timerData) tu n'aurais pas un petit lien pour moi où je puisse aller m'instruire?

**FremyCompany** · 31/07/2006, 12h57

Un lien, ben non je ne vois pas comme ca...
Je connais un chouette petit tutoriel sur le JavaScript, la gestion des classes, des simils-NameSpace, ..., si c'est ca qui t'intéresse... Je vais essayer de le retrouver et j'édite mon messsage pour le mettre.

Sinon je vois pas trop ce que tu veux

**Eric Berger** · 31/07/2006, 14h27

Je n'ai pas trouvé ce que je cherchais....

Mais je crois que j'ai pigé le principe.. je farfouillerai le net à l'occase pour en savoir un peu plus... Merci quand-même.

**speedev** · 01/08/2006, 09h42

et me revoilà! HAHAHAHA!

Voici un peu plus compliqué maintenant, toujours avec les multiples-retardateurs...je vous explique où j'en suis dans le dév:

1-->page avec une liste contenant des marques de produits
2-->sur le onchange() j'execute une requête xhr en passant la marque
3-->Je récupère toutes les images appartenant au dossier de la marque
4-->Je génère en mm tps le code html avec les div contenant les images miniaturisées automatiquement
5-->Je lance l'animation d'affichage des images en jeu de cartes! Elles apparaissent toutes automatiquement de nulle part en se déplaçant vers leur position calculée.

Tout se passe à merveille (c'est beau!)...

seulement...

Si j'exécute un onchange() pendant que des images d'une marque sont en train de bouger, je fais de nouveau entrer en conflit les timers déjà lancés.

Question:
J'aimerai pouvoir effacer tous les timers en cours en cliquant sur la liste, donc sur l'évement onchange(). Sachant que les timers sont créés en dehors des fonctions dans le fichier deplace.js et de cette manière :

Code :

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

1
2
timer = new Array();
timer2 = new Array();

Est-il possible d'accéder à ces timers depuis un autre événement?? ca me parait impossible, pourtant il FAUT que j'arrive à annuler tout traitement en cours sur le onchange de la liste!!!!

Merci de vous prendre la tête avec moi!

**Eric Berger** · 01/08/2006, 09h52

Ben ton tableau de timers est global, non? donc il te suffit de le parcourir et de faire des clearTimeout sur chacun de ses éléments, non?

J'ai peut-être pas tout bien compris

**speedev** · 01/08/2006, 09h54

Tu as parfaitement compris seulement ça ne fonctionne pas, j'ai réagit comme toi...j'ai directement fais un clearInterval sur le onchange... podbol

**speedev** · 01/08/2006, 10h08

Si je fais un alert(timer[1]) cela me renvoit undefined.
Donc que mon tableau de timers déclaré en global dans deplace.js n'est pas accessible depuis une autre fonction d'un AUTRE fichier.

Chuis coincé...

**Eric Berger** · 01/08/2006, 10h20

Ah non, ça c'est pas possible, ce tableau doi être accessible depuis tous tes scripts....

Essaie, pour le test, d'y mettre une valeur quelconque dans un indice et de la récupérer.

**FremyCompany** · 01/08/2006, 10h22

Lol, avec ma méthode, tu pouvais toujours arrêter le traitement

Et si tu créais une variable currentRequest contenant un nombre, à chaque onchange il est incrémenté, et dans chaque fonction, tu passes en argument le currentRequest actuel, ensuite tu vérrifie au lancement de la fonction si le currentRequest a tjrs la même valeur que l'argument (je crois que le code sera plus simple à comprendre)

Code :

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

1
2
var cr = currentRequest;
obj.timer = setInterval(function() { Move(obj, cr) }, 100);

Code :

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

1
2
3
4
5
6
7
8
Move=function(obj, cr) {
    if (cr == currentRequest) {
         // Effectuer le traitement
    } else {
         // Supprimer le timer
         clearInterval(obj.timer)
    }
}

Notez que je vous avais bien dit que ca allait devenir un vrai bordel avec votre méthode

**speedev** · 01/08/2006, 10h22

Autant pour moi, j'affichais un indice inexistant.
Oui donc j'y accède bien.

Maintenant...j'ai beau vider toutes les entrées, il y a toujours un conflit.

Possibilité de supprimer une variable globale? Je cherche...

**speedev** · 01/08/2006, 10h25

Lol fremy, oui oui je vois que ta solution est forcément optimale. Mais je suis têtu et bien lancé dans mon code qui fonctionne plutot parfaitement à part les fameux conflits de timer. Suffit que je résolve ça!

Remarque, après je m'interesserai à ton code si tu as qlq minutes mais pas tout de suite!

Merci

**Eric Berger** · 01/08/2006, 10h45

Supprimer le tableau n'équivaut pas à faire des clearTimeout sur tous ses éléments. Supprimer le tableau ne te servira à rien.

A mon avis, effectuer des clearTimeout sur tous les éléments devrait fonctionner.

Mais ensuite, tu as un tableau de références "arrêtées" d'une taille peut-être supérieure au nombre de nouvelles images que tu vas devoir traiter. A ce moment là, il peut être intéressant d'écraser le tableau existant (dont tu n'as plus besoin) en faisant :

Code :

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

timer = new Array()

Le problème, c'est bien que tu n'arrives pas à te débarrasser de l'ancienne animation avant de démarrer la nouvelle?

**speedev** · 01/08/2006, 10h51

En gros là maintenant j'arrive à tuer les timers en faisant une boucle de parcours jusqu'à timer.length.

Le soucis je pense relève plutôt d'un bug ou de l'incapacité du navigateur à effectuer un traitement à telle ou telle vitesse.

Si je sélectionne et resélectionne de nouveau dans la liste, les timers se tuent correctement et aucune erreur apparait.
Mais si je clique comme un ouf deux fois ou trois fois sur la liste en mm pas une seconde. mozilla m'affiche un chrono d'erreur infinies qui pourrait très bien faire planter le navigateur.
En gros il freeze sur un timer qui n'est jamais tué.

Je parle des setInterval.
Même si j'écrase (ce que j'ai déjà fais) avec un new Array(), les timers sont conservés pdt un millième de seconde en mémoire...

chiant tout ça, très chiant!

**Eric Berger** · 01/08/2006, 10h58

Tu fais un appel ajax, c'est juste? Si c'est le cas, arrête ton animation au moment où tu fais ta requête, l'animation aura le temps de s'arrêter tranquillement en attendant la réponse

**speedev** · 01/08/2006, 11h00

lol je le fais déjà, sans succès, je te le dis....à mon avis c'est une incapacité du navigateur à gérer de multiples retardateurs mais je cherche encore!!

**speedev** · 01/08/2006, 11h12

Bon allez voici mon code, ça facilitera la recherche a tout le monde:

Ici la fonction appelée sur le onchange().
Simple fonction post-traitement...
J'y fais une boucle qui tue les timers (globaux) et par ailleurs je vide le div conteneur de l'animation, histoire que les id ne se dupliquent pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function charge_cod(cod)
{
	document.getElementById("load_img").innerHTML="";
	clearTimeout();
	for (i=0;i<timer.length;i++)
	{
		clearInterval(timer[i]);
	}
	setTimeout(function(){charge(cod)},1000);
}

Pour être sûr que tout ai le temps de se faire je fais un petit setTimeout qui appelle la fonction ajax ci dessous:

Code :

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

1
2
3
4
5
function charge(cod){
	var XHR = new XHRConnection();
	XHR.appendData("cod",cod);
	XHR.sendAndLoad("/web/xml/req_fab.php", "POST", back_charge_cod);
}

Ici la fonction callback d'ajax, retour d'informations donc.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function back_charge_cod(obj) 
{
	var t_cod = obj.responseXML.getElementsByTagName('code');
	if (t_cod.length>0)
	{
		code = t_cod[0];
document.getElementById("load_img").innerHTML=code.getAttribute("cod");
		deplace(code.getAttribute("nbpics"),1);
	}
	else
	{
		alert('aucune donnée');
	}
}

code.getAttribute("cod") ---> contient le code html complet de tous les divs et images miniaturisées.
deplace(code.getAttribute("nbpics"),1); --> enclenche la fonction de déplacement de tous les div de 0 à nbpics. (le chiffre 1 c'est pour déplacer, si je met 0, les images feront les mm mouvements mais à l'envers et plus rapidement...retour à l'envoyeur, d'ou animation jeu de carte! lol)

Voici les parties concernées dans le fichier deplace.js:

ceci en global

Code :

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

timer = new Array();

fin de la fonction de déplacement d'une image:

Code :

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

1
2
3
4
if (xa && ya)
	{
		clearInterval(timer[i]);
	}

en gros si position X vraie et position Y vraie alors image arrivée à destination et donc tuer le timer en cours.
Ici, le timer est tué uniquement qd l'image est arrivée à destination.
Toute la procédure pour tuer tous les timers est dans la fonction post-traitement ajax.

Maintenant si vous voyez le pb...à vos claviers!

**Eric Berger** · 01/08/2006, 11h23

Dans ta première fonction, le clearTimeout sert à quoi?

[setTimeOut] Multiples retardateurs

JavaScript

Discussions similaires

Partager

Partager