Javascript führt die Befehle nicht der Reihenfolge nach aus?

Übersicht Sonstiges Smalltalk

Neue Antwort erstellen

Knyk

Betreff: Javascript führt die Befehle nicht der Reihenfolge nach aus?

 BeitragSa, Jun 23, 2012 17:19
Antworten mit Zitat
Benutzer-Profile anzeigen
Hallo,
Vielleicht kennt sich ja hier jemand mit Javascript ein wenig aus...
Ich habe folgendes Problem:
Eine Animation soll ausgeführt werden.
Dann soll sich der Z-index eines Elementes ändern.
Danach soll eine zweite Animation ausgeführt werden.

Mein Problem ist, dass egal wo es im Code steht, der z-index zuerst geändert wird. Es wird Quasi die Reihenfolge nicht beachtet. Weiss jemand warum?

Das js sieht so aus (mit http://jsanim.com/ lib gemacht):
Code: [AUSKLAPPEN]
function init () {
var manager = new jsAnimManager();     
var anim = manager.createAnimObject("paper");

anim.add({property: Prop.left, to: 1000 , 
    duration: 1000});
    paper = document.getElementById("paper"); 
content = document.getElementById("paper");     
paper.style.zIndex="1"
content.style.zIndex="2"   
anim.add({property: Prop.left, to: 0 , 
    duration: 1000}); 

}

die function init() wird bei onload aufgerufen...

ZEVS

 BeitragSa, Jun 23, 2012 17:34
Antworten mit Zitat
Benutzer-Profile anzeigen
Nun ja, dieses Verhalten ist durchaus gerechtfertigt. Anders als z.B. BlitzBasic, haben JavaScript-Funktionen (im Normalfall) praktisch keine Ausführungszeit (Ausnahmen bilden synchrone Reqests sowie alert, confirm und prompt). Um dennoch Animationen durchzuführen, wird mit Timeouts und Intervallen gearbeitet (der Browser wird hier aufgefordert, eine bestimmte Funktion nach n Millisekunden / alle n Millisekunden aufzurufen). Nach dem Setzen des Timeouts oder des Intervalls durch setTimeout oder setInterval wird die Funktion normal weitergeführt. D.h., Code: [AUSKLAPPEN]
anim.add({property: Prop.left, to: 1000 ,
    duration: 1000});

Setzt nur ein Timeout oder Intervall und führt die Funktion sofort weiter. Du müsstest übrigens auch sehen, dass die andere Animation gleichzeitig mit der ersten ausgeführt wird.
Die Lösung ist leider etwas kompliziert. Eigentlich sollte das Framework eine API bereitstellen, um Funktionen direkt nach Beenden der Animation aufzurufen (ich schätze so etwas wie anim.onfinish = function () { ... } oder anim.onfinish(function () { ... });
Wenn das nicht geht kannst du mit setTimeout die Funktion auch manuell aufrufen lassen (setTimeout (function () { ... }, 1000)); Das ... steht in diesem Falle für das Ändern von zIndex sowie das Aufrufen der nächsten Animation.
Meine Lösung mit setTimeout:
Code: [AUSKLAPPEN]
function init () {
    var manager = new jsAnimManager();     
    var anim = manager.createAnimObject("paper");

    anim.add({property: Prop.left, to: 1000 ,
    duration: 1000});
    setTimeout(function () {
        paper = document.getElementById("paper");
        content = document.getElementById("paper");     
        paper.style.zIndex="1"
        content.style.zIndex="2"   
        anim.add({property: Prop.left, to: 0 ,
            duration: 1000});
    }, 1000);

}

The Shark

 BeitragSa, Jun 23, 2012 20:08
Antworten mit Zitat
Benutzer-Profile anzeigen
Laut der JSanimSeite müsste das folgendermaßen gehen:

Code: [AUSKLAPPEN]

function changeZ(){
  paper = document.getElementById("paper");
  content = document.getElementById("paper");     
  paper.style.zIndex="1"
  content.style.zIndex="2"     
}

function init () {
var manager = new jsAnimManager();     
var anim = manager.createAnimObject("paper");

anim.add({property: Prop.left, to: 1000 ,
    duration: 1000, onComplete: changeZ()});
anim.add({property: Prop.left, to: 0 ,
    duration: 1000});

} 

Knyk

 BeitragSa, Jun 23, 2012 21:34
Antworten mit Zitat
Benutzer-Profile anzeigen
@The Shark
Japp so hab ichs jetzt auch gemacht.

Den ganzen Timeout-Kram werd- ich mir mal anschauen.

Ich wollte die Animationsfunktion nämlich bei onclick der Navigationslinks ausführen.
Jetz muss ichs noch so hinbekommen, dass auf die Beendigung der Animation gewartet wird, bevor die neue Seite lädt^^

The Shark

 BeitragSo, Jun 24, 2012 1:36
Antworten mit Zitat
Benutzer-Profile anzeigen
Seite laden kannst ja mit
Code: [AUSKLAPPEN]
window.location.href = "deine_seite.html";

also machst sowas wie
Code: [AUSKLAPPEN]
<a href="#" onclick="change_page("neue_seite.html")">toller link</a>

Code: [AUSKLAPPEN]
function change_page(site){
anim.add({property: Prop.left, to: 1000 ,duration: 1000, onComplete: changeZ()});
anim.add({property: Prop.left, to: 0 ,duration: 1000, onComplete: window.location.href = site});
}

ist eher pseudocode Wink

ZEVS

 BeitragSo, Jun 24, 2012 14:22
Antworten mit Zitat
Benutzer-Profile anzeigen
@The Shark: Zwei Dinge. 1.:
Zitat:
Eine Animation soll ausgeführt werden.
Dann soll sich der Z-index eines Elementes ändern.
Danach soll eine zweite Animation ausgeführt werden.

Bei deiner Lösung finden beide Animationen gleichzeitig statt, erst dann wird der z-index geändert.
2.: Zitat:
onComplete: changeZ()

Ruft die Funktion changeZ sofort auf und speichert den Rückgabewert (undefined) als Eigenschaft onComplete. Selbiges gilt für Zitat:
onComplete: window.location.href = site

@Knyk: Zitat:
Jetz muss ichs noch so hinbekommen, dass auf die Beendigung der Animation gewartet wird, bevor die neue Seite lädt^^

Ich weiß nicht ob es möglich ist, den Benutzer vom Zurücknavigieren abzuhalten. Ich weiß auch nicht, ob du dir damit nur Freunde machst.

ZEVS

The Shark

 BeitragSo, Jun 24, 2012 14:43
Antworten mit Zitat
Benutzer-Profile anzeigen
ZEVS hat Folgendes geschrieben:

Bei deiner Lösung finden beide Animationen gleichzeitig statt, erst dann wird der z-index geändert.

Da bin ich anderer Meinung. Zumindest die Animationen sollten nicht gleichzeitig stattfinden:
jsanim.com hat Folgendes geschrieben:

Animations can also be chained, such that one immediately follows the other. Note that we can also use the wait property to pause a chain for a set amount of time!
Code: [AUSKLAPPEN]
[...]
anim.add({property: Prop.position, to: new Pos(250,25), 
    duration: 2000}); 
anim.add({property: Prop.wait, duration: 1000}); 
anim.add({property: Prop.position, to: new Pos(0,100), 
    duration: 2000}); 




ZEVS hat Folgendes geschrieben:

2.: Zitat:
onComplete: changeZ()

Ruft die Funktion changeZ sofort auf und speichert den Rückgabewert (undefined) als Eigenschaft onComplete. Selbiges gilt für Zitat:
onComplete: window.location.href = site

Da stimm ich dir zu, aber das kann man ja ohne Probleme in ne anonyme funktion hauen.

Neue Antwort erstellen


Übersicht Sonstiges Smalltalk

Nach Oben

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group