schnell aufeinanderfolgende timeouts, selbes handle?

[zaphod1984]

ich habe eine funktion die den wartebildschirm einer ajaxanwendung triggern soll.
wenn ein request schneller als 1000ms abgearbeitet wird, soll der ladebildschirm nicht getriggert werden.

alles an sich kein problem, schickt man aber zwei requests sehr schnell hintereinander ab, haben beide timeouts das selbe handle, wodurch aber nur eines der beiden timeouts zurück gesetzt wird, so dass ich vor einem problem stehe!
(getestet in FF3 und IE7)

ich habe gelernt dass man immer beispiele mitliefern soll, daher im folgenden die nachgestellte situation die das verhalten exakt simuliert.

mein simulierter request dauert 500ms also sollte nie ein ladebildschirm angezeigt werden (erst nach 1000), bei zwei schnell aufeinander folgenden klicks (doppelklick auf den button oder so) bleibt am ende die meldung "show" übrig, d.h. der ladebildschirm bleibt stehen...

  
<script>  
 var timeoutHandlerWaitBG = '';  
  
 function showWaitBG(show,timeOut) {  
  if (show) {  
   if (timeOut) {  
    document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + 'show';  
   } else {  
    timeoutHandlerWaitBG = window.setTimeout("showWaitBG(true,true)",1000);  
    document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + 'time gestartet:' + timeoutHandlerWaitBG + ' ';  
   }  
  } else {  
   window.clearTimeout(timeoutHandlerWaitBG);  
   document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + '<b>hide:' + timeoutHandlerWaitBG + ' </b>';  
  }  
 }  
  
 function show() {  
  showWaitBG(true);  
  var bla = window.setTimeout("showWaitBG(false)",500);  
 }  
</script>  
<div id="debug"></div>  
<input type="button" onclick="show();" value="klickmich">  

hat jemand eine idee warum sich die browser so verhalten?
verhindern kann ich ja nicht dass jemand zweimal schnell hintereinander einen request abschickt...

thx!

[zaphod1984]

okay, ich weiß jetzt warum es passiert.
bei den aufeinanderfolgenden aufrufen wird (beispielsweise) das handle 7 und das handle 8 erzeugt, anschließend wird zweimal das handle 8 zurück gesetzt, der timer mit dem handle 7 läuft aber weiter und zeigt dann den ladebildschirm.
hab ich irgendwie übersehen dass die handles unterschiedlich sind.

ich könnte jetzt alles handles in ein array speichern und jeweils alle handles des arrays zurück setzen...
naja.

[zaphod1984]

okay, hier ist meine lösung.
vielleicht interessiert es ja noch jemanden oder jemand hat eine bessere idee.

witzig, durch das posten im forum hat sich die lösung an sich ergeben... :)

  
<script>  
 var handles = Array();  
  
 function showWaitBG(show,timeOut) {  
  if (show) {  
   if (timeOut) {  
    document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + 'show';  
   } else {  
    var nr = handles.length;  
    handles[nr] = window.setTimeout("showWaitBG(true,true)",1000);  
    document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + 'time gestartet:' + nr + ' ';  
   }  
  } else {  
   for each (var val in handles) window.clearTimeout(val);  
   document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + '<b>hide</b>';  
  }  
 }  
  
 function show() {  
  showWaitBG(true);  
  var bla = window.setTimeout("showWaitBG(false)",500);  
 }  
</script>  
<div id="debug"></div>  
<input type="button" onclick="show();" value="klickmich">  

[Struppi]

ich könnte jetzt alles handles in ein array speichern und jeweils alle handles des arrays zurück setzen...
naja.

Besser wäre ein Objektorientierter Ansatz, wo du für jeden Request ein Objekt erzeugst. Dann entstehen solche Probleme nicht.

Struppi.

[zaphod1984]

Besser wäre ein Objektorientierter Ansatz, wo du für jeden Request ein Objekt erzeugst. Dann entstehen solche Probleme nicht.

du meinst für jeden ajax-request?
das ist sowieso der fall, die funktion um die es mir hier geht ist eine reine gui-komponente die an sich nichts mit dem request zu tun hat, ein callback für den anfang und das ende eines requests, fertig...

[Struppi]

Besser wäre ein Objektorientierter Ansatz, wo du für jeden Request ein Objekt erzeugst. Dann entstehen solche Probleme nicht.
du meinst für jeden ajax-request?
das ist sowieso der fall, die funktion um die es mir hier geht ist eine reine gui-komponente die an sich nichts mit dem request zu tun hat, ein callback für den anfang und das ende eines requests, fertig...

Dann kannst du doch in dem Objekt auch deinen Timeouthandler verpacken.

Struppi.

[zaphod1984]

Dann kannst du doch in dem Objekt auch deinen Timeouthandler verpacken.

tatsache, gute idee!

aber die trennung von ablauflogik und gui...
meine ajaxklasse macht nur den request und ruft der übergebenen callback mit dem responseXML auf.
hat ja an sich mit der gui (was ein ladebildschirm ist) eigentlich nicht viel zu tun.

[Struppi]

Dann kannst du doch in dem Objekt auch deinen Timeouthandler verpacken.
tatsache, gute idee!

aber die trennung von ablauflogik und gui...
meine ajaxklasse macht nur den request und ruft der übergebenen callback mit dem responseXML auf.
hat ja an sich mit der gui (was ein ladebildschirm ist) eigentlich nicht viel zu tun.

Naja, was soll ich sagen, ich kenne nur einen winzigen Auschnitt aus deinem Code, der eindeutig nicht OO ist. Daher konnte ich dir nur einen Tipp geben. Aber natürlich ist es auch möglich meinen Vorschlag sauber OO umzusetzen. Selbstverständlich kannst du den timer auch dort einbauen, wo du ihn brauchst bzw. wo du denkst, dass er hingehört.

Struppi.