Javascript Timeout Callback Problem

  • Themenstarter Themenstarter Pyseudonimm
  • Beginndatum Beginndatum
P

Pyseudonimm

Hallo in die Runde,

ich kämpfe gerade mit einem kleinen Problem, das sicherlich schon meherer Anfänger hatten. Zumal, wenn sie nicht direkt jQuery eingesetzt haben.

Und zwar eine Aktion nach Aufruf meiner Timeout-Funktion schneller ausgeführt, als die Funktion zuvor zum Ausführen der eigentlichen Aufgabe braucht.

Hier mein Script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css"> div {height:150px;}
</style>
</head>
<body>
<div style="height:150px;border:1px solid #000;" id="header-inner">
header-inner
</div>
</body>
<script type="text/javascript">
function setNewSize (e, ts, s) {
var t=20
var b=5;
s = s||0;
s=s+b;
if (s<=ts) {
e.style.height=s;
window.setTimeout(function () { setNewSize(e, ts, s); }, t);
} else {
e.style.height=ts;
}
}
function ResizeHeader() {
var hi = document.getElementById("header-inner");
setNewSize(hi,100);
//document.write("ok");
}

if (window.addEventListener){
window.addEventListener("load", ResizeHeader, false)}
else if (window.attachEvent) {
window.attachEvent("onload", ResizeHeader)}
</script>
</html>

Wenn ich die Zeile "document.write("ok");" nicht deaktiviere, wird die Ausführung der Funktion überhaupt nicht angezeigt. Dasselbe Problem habe ich auch auf der Webseite,Rahmen wird nicht verkleinert.

Wie kann ich es - analog zu jQuery's Callback - denn erreichen, dass eine Callback-Funktionaliät ausgeführt wird?
Was muss ich da noch einbauen, dass das System solange wartet, bis der Rahmen in diesem Fall steht?

Vielen Dank + beste Grüße

Martin
 
Moin Martin,

Wenn ich die Zeile "document.write("ok");" nicht deaktiviere, wird die Ausführung der Funktion überhaupt nicht angezeigt.
Zum Vergrößern anklicken....

Nicht nur das wird nicht angezeigt, dein Dokument wird nur noch aus dem Wörtchen "ok" bestehen.

Ursache: wenn du write() nach dem Laden des Dokumentes ausführst, wird der komplette Dokumentinhalt überschrieben.....so auch das Skript, es existiert schlicht nicht mehr :-)

Lösung: verwende andere Methoden als write(), um nach abgeschlossenen Ladevorgang etwas ins Doument einzufügen, bspw. appendChild() oder das Setzen der innerHTML-Eigenschaft eines Knotens.

Zum Callback ansich.... du willst ja nach der abgeschlossenen Animation reagieren, da steht deine Anweisung momentan am falschen Platz.
Hier wäre sie gut aufgehoben:
Code: 
function setNewSize (e, ts, s) {
var t=20
var b=5;
s = s||0;
s=s+b;
if (s<=ts) {
e.style.height=s;
window.setTimeout(function () { setNewSize(e, ts, s); }, t);
} else {
e.style.height=ts;
//Hier ist die Animation fertig, Hinweis kann ausgegeben werden
document.body.innerHTML+="ok";
}
}
 
Hallo Sven,

Ich fürchte, ich habe mich auch nicht ganz richtig ausgedrückt, deshalb hier ein Beispiel, dass das Problem besser deutlich macht.
Basis ist http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_right mit kleinen Änderungen.

Ziel ist es, dass zuerst "1" ausgeführt wird und dann erst "2". Wie stelle ich das an? Momentan wird immer zuerst "2" und dann erst "1" ausgefährt.
Auch wenn ich mein Problem ohne jQuery lösen möchte, ist dieses Beispiel in jQuery realisiert, um das Reihenfolgeproblem zu verdeutlichen.

Beste Grüße
Martin


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("1");});
});
alert("2");
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
 
Auch da steht der alert(2) an der falschen Stelle.

Hier mal das ganze anders eingerückt und hervorgehoben, was wozu gehört:

Code: 
$(document)
.ready(
        function()
        {
          $("button")
          .click(
                  function()
                  {
                    $("p")
                    .hide(1000,
                          function()
                          {
                            alert("1");
                          }
                         );
                  }
                );
          alert("2");
        }
      );

Was ist was:
  • Fett: die Funktion, die bei document.ready aufgerufen wird
  • blau: die Zuweisung an den Klick-Event des Buttons
  • kursiv und unterstrichen:die Callback-Funktion für die hide()-Methode
  • rot: ein simpler alert(2), der wird bei document.ready aufgerufen, weil dort steht er....alert(1) ist das Callback der Funktion hide() und wird als solches ausgeführt, wenn auf den Button geklickt wurde und die hide()-Funktion fertig mit dem ist, was sie tun soll

Ich fürchte, ich habe mich auch nicht ganz richtig ausgedrückt
Zum Vergrößern anklicken....
Jo, das hast du aber jetzt wieder nicht :-(
Du hast geschrieben, dass der alert(1) zuerst kommen soll, aber nicht, als Reaktion auf welches Ereignis dieser alert kommen soll.
 
Irgendwie ist der Wurm drin...Vielleicht mal ganz einfach gefragt, was muss ich anstellen, damit der Alert kommt, nachdem Resize fertig ist?

Grüße
Martin


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<div style="height:150px;border:1px solid #000;" id="header-inner"> header-inner
</div>
</body>
<script type="text/javascript">
function setNewSize(e, ts, s) {
var t = 20
var b = 5;
s = s || 0;
s = s + b;
if (s <= ts) {
e.style.height = s;
window.setTimeout(function() {
setNewSize(e, ts, s);
}, t);
} else {
e.style.height = ts;
}
}

function ResizeHeader() {
var hi = document.getElementById("header-inner");
setNewSize(hi, 100);
alert("OK");
}
if (window.addEventListener) {
window.addEventListener("load", ResizeHeader, false)
}
else if (window.attachEvent) {
window.attachEvent("onload", ResizeHeader)
}
</script>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück