Forums : Xul, Xbl, JS...

Je ne comprends pas trop ta remarque:

C'est-à-dire que l'affichage n'est pas modifié du temps que le script n'est pas fini.

Ça veut dire quoi ?

Qu'à la fin du script, tu fais un opacity = 1; et que ce n'est pas pris en compte ?

Au début du script je mets :

document.getElementById('un-id').style.opacity = 0.5

=> je voudrais que l'affichage de l'élément cliqué soit un peu opaque pour dire à l'utilisateur qu'il se passe qq chose. (c'est un long script !)

A la fin du script je mets :

document.getElementById('un-id').style.opacity = 1

=> je voudrais que l'affichage de l'élément cliqué redeviennent dans l'état initial.

Or, le "style.opacity = 0.5" n'est pas concrétiser à l'affichage. C'est-à-dire que l'utilisateur ne va jamais voir ce bouton un peu opaque, parce que, il semble, que Firefox attends la fin du script pour changer l'affichage à l'écran Et que à la fin du script, j'ai la directive style.opacity = 1 (rétabli l'opacité)

Suis-je plus clair ?

Remarque : si je mets uniquement :

document.getElementById('un-id').style.opacity = 0.5

dans ce cas, j'ai bel et bien un élément opaque. (mais quand le script a fini de s'exécuter)

Si entre le style.opacity = 0.5 et le démarage de ton script tu mets un alert(), est-ce que le style du bouton est changé quand le alert est affiché ?

et au lieu de passer par la propriété style, si tu utilises l'attribut, le comportement est le même ? setAttribute("style", "opacity: 0.5;")

setAttribute("style", "opacity: 0.5;")

même resultat qu'avec style.opacity. C'est-à-dire pas de rafraîchissement.

Si entre le style.opacity = 0.5 et le démarage de ton script tu mets un alert(), 

Oui, dans ce cas, l'affichage est mis à jour. l'icône devient un peu opaque au moment ou l'alert box apparaît et redevient normal à la fin du script.

C'est peut-être, pour une question de performance de l'affichage...

Avec le message d'alerte, tu as un résultat correct ? Alors, je suggère 2 tests à faire :

1- Lancer la définition de l'attribut opacity via un setTimeout, comme par exemple

setTimeout('<objetDOM>.setAttribute("style", "opacity: 0.5;")', 0);

2- Augmenter artificiellement la durée de ton script, avec un boucle plus longue. L'interface graphique a peut être besoin de temps pour se rafraichir.

(topic intéressant en tous les cas)

Merci bien pour vos suggestions. Voici le résultat :

1- Lancer la définition de l'attribut opacity via un setTimeout, comme par exemple

J'ai donc mis au début du script :

setTimeout('<objetDOM>.setAttribute("style", "opacity: 0.5;")', 0);

et à la fin :

setTimeout('<objetDOM>.setAttribute("style", "opacity: 1;")', 1000);

Si le script dure moins d'une seconde, j'obtiens l'effet désiré. Mais, le "opacity: 0.5 est lancé uniquement à la fin du javascript, ça dure donc moins d'une seconde avec que l'icône reprennent son apparence normale Par contre si le script dure plus d'une seconde, la première directive n'est pas affichée. :o/

2- Augmenter artificiellement la durée de ton script, avec un boucle plus longue. L'interface graphique a peut être besoin de temps pour se rafraichir.

Le script de base est déjà assez long, il dure environ 2-3 secondes. En rajoutant une boule de 10000 occurences la durée passe à 8-10 secondes. Encore une fois, pas de changement au niveau de l'interface avant que le script arrive à la fin.

Il faudrait une méthode javascript du genre "screen.draw()"

heu et si tu essayais plutot de lancé ton script dans un setTimeout et non les setAttribute() moi, je trouverais ca plus normal. Sinon, voila un petit script fait maison, pour simulé un Thread en js :

Thread=function(obj) {
   this._obj = obj;
   this._id = Thread.id++;
   Thread._threads[this._id] = this;
}
Thread._threads = {};
Thread.id = 0;
Thread.prototype = {
   _obj : null,
   getObj : function() {return this._obj;},
   setObj : function(o) {
      this._state=true;
      this._obj=o;
   },
   _t : 0,
   _id : null,
   _state : true,
   getId : function() {return this._id;},
   start : function(t) {
      if(!t) this._t=t;
      this.onStart();
      setTimeout("Thread._threads["+this._id+"]._run()", this._t);
   },
   _run : function() {
      if(this._state&&this.run()) setTimeout("Thread._threads["+this._id+"]._run()", this._t);
      else if(!this._state) this.onStop();
      else this.onFinish();
   },
   run : function() {
      return this._obj.run();
   },
   stop : function() {this._state=false;},
   onStart : function() {if(this._obj&&this._obj.onStart) this._obj.onStart();},
   onFinish : function() {if(this._obj&&this._obj.onFinish) this._obj.onFinish();},
   onStop : function() {if(this._obj&&this._obj.onStop) this._obj.onStop();},
   addEventListener : function(evt, fct, b) {
//   TODO
   }
}

Et voila le mode d'emploi

/*
var runnable = {
   run : function() {
      .
      . // code à executer
      .
      return continue; // true/false;
   },
   onFinish : function() { // facultatif
   },
   onStart : function() { // facultatif
   },
   onStop : function() { // facultatif
   }
}
var thread = new Thread(runnable);
thread.start();
.
.
.
thread.stop();
*/

ou

/*

var thread = new Thread();
thread.run = function() {
   .
   . // code à executer
   .
   return continue; // true/false;
}

thread.onFinish : function() { // facultatif
}
thread.onStart : function() { // facultatif
}
thread.onStop : function() { // facultatif
}

thread.start();
.
.
.
thread.stop();

*/

Merci de dire si ca marche, a vrai dire j'ai fait ce code ya une paye... alors....

Magnifique :) Yes, hhf !!

Je résume donc mon code :

var thread = new Thread();
thread.run = function() {
//tâche no 1
}
thread.start(0);

var thread2 = new Thread();
thread2.run = function() {
//tâche no 2
}
thread2.start(5);

=> le thread 2 est déclenché 5 ms après le thread 1 et l'affichage se regénère.

=> attention à bien mettre un integer pour la méthode :

thread.start(int)

Vraiment merci pour toutes ces propositions...