[FRAGE] Programmfluss bei Animation stoppen

[znieh99]

Hallo Forum,
ich möchte verhindern, dass der Programmcode während einer Animation weiterläuft.

Konkretes Beispiel: Mit 'animate' zeige ich einen Wert an der zuerst größer und dann kleiner wird bis er ausgeblendet wird. Wären dessen läuft der Code weiter und blendet eine Meldung ein. Aber diese Meldung sollte erst dann eingeblendet werden wenn die Animation beendet ist.
lg heinz

 

[TecEye]

jquery? dann bau ein callback in die animation ein also eine function(){ alert('jetzt starten'); } ans ende deiner .animate

 

[znieh99]

jquery? dann bau ein callback in die animation ein also eine function(){ alert('jetzt starten'); } ans ende deiner .animate

Danke!
das heißt aber, dass der gesamte der Animation folgende Code in dieser 'callback-funktion' gepackt sein muss?

- - - Aktualisiert - - -

Wieso funktioniert die folgende Variante nicht? Es erfolgt keine Animation und keine Console-Ausgabe sondern sie bleibt in der 'while-Schleife' hängen.

function testAnimation() {
    var stopp = false;      // Schalter zum Stoppen des Codefluss
    var obj = $("#animate");
    
    stopp = true;

    obj.animate({fontSize: '3em'}, "300" , function() {
        stopp = false;
    });

    while(stopp) { }
    
    console.log("Animation fertig");

}

 

[TecEye]

was soll die leere while? nunja was sagt denn die fehlerkonsole?

 

[tsseh]

das heißt aber, dass der gesamte der Animation folgende Code in dieser 'callback-funktion' gepackt sein muss?

ja

Wieso funktioniert die folgende Variante nicht? Es erfolgt keine Animation und keine Console-Ausgabe sondern sie bleibt in der 'while-Schleife' hängen.

weil animate mit setTimeot, requestAnimationFrame oder etwas in der art ein callback an ein zeitgesteuertes event bindet.
wenn das event dann aber ausgelöst wird, kann das callback aber nicht abgearbeitet werden, weil du hier noch im vorhergehenden codeblock in der while-schleife hängst. die wird aber nie beendet, weil stop erst auf false gesetzt wird, wenn die animation beendet ist. die kommt aber nicht zum zuge.

- - - Aktualisiert - - -

eventhandler X ist z.b. die funktion die beim Event DOMContentLoaded gerufen wird
eventhandler Z ist die funktion die animate an ein zeitevent bindet

nur dass in deinem fall eventhandler X nie fertig wird, weil stop in eventhandler Z false gesetzt wird

 

[kkapsner]

das heißt aber, dass der gesamte der Animation folgende Code in dieser 'callback-funktion' gepackt sein muss?

Ja.

Wieso funktioniert die folgende Variante nicht?

Weil JS synchron in nur einem Thread ausgeführt wird und die while-Schleife den Browser komplett einfrieren lässt, da daneben nichts ausgeführt werden kann.

- - - Aktualisiert - - -

Ups... mal wieder nicht aktualisiert...

 

[znieh99]

Hallo tsseh,
Ich blicke da nicht ganz durch. So wie ich deine Antwort verstehe, wird die Animation erst gestartet bis das komplette Script abgearbeitet ist.
Ich dachte mir, dass die Animation ein eigener Thread ist und parallel zum Script läuft und daher der callback irgend wann den Schalter auch setzt.

lg heinz

- - - Aktualisiert - - -

Ja.


Weil JS synchron in nur einem Thread ausgeführt wird und die while-Schleife den Browser komplett einfrieren lässt, da daneben nichts ausgeführt werden kann.

Ok, das verstehe ich.
Es gibt also keine Möglichkeit die weitere Code-Ausführung zu verhindern - ev. durch timeout?

 

[kkapsner]

Es gibt also keine Möglichkeit die weitere Code-Ausführung zu verhindern - ev. durch timeout?

In JS Harmony gibt es yield... aber die werden noch nicht überall unterstützt.

Timeouts helfen dir da nicht wirklich weiter. Warum willst du nicht mit den Callbacks arbeiten? Oder ev. solltest du dir Promises ansehen.

 

[znieh99]

Timeouts helfen dir da nicht wirklich weiter. Warum willst du nicht mit den Callbacks arbeiten? Oder ev. solltest du dir Promises ansehen.

Ich habe nichts gegen Callbacks, nur in diesen Fall ist meine Programm-Struktur wohl nicht dafür geeignet.
Parallel werde ich mir Promises ansehen.

Danke einstweilen, heinz

 

[tsseh]

In JS Harmony gibt es yield... aber die werden noch nicht überall unterstützt.

das ist ja auch nur ein return in abhängigkeit eines states, also problemlos nachbaubar, ich sehe aber nicht wie ihm das weiterhelfen soll, bzw. hilft es ihm da nicht wirklich weiter.

Timeouts helfen dir da nicht wirklich weiter.

mit betonung auf nicht wirklich, über timeouts könnte er das genau wie mit generatoren von hinten durch die brust ins auge schon lösen, allerdings müsste er für die timeouts seinen code dafür nur in ein callback packen - huch, dann geht es ja auch einfacher

Parallel werde ich mir Promises ansehen.

das sollte am elegantesten sein, ist aber auch nur ein callback - nur besser lesbar und löst ewig tiefe verschachtelungen auf - wobei das wieder auf kosten der lesbarkeit geht.

- - - Aktualisiert - - -

Ich habe nichts gegen Callbacks, nur in diesen Fall ist meine Programm-Struktur wohl nicht dafür geeignet.

dein fall - eigentlich jeder - ist problemlos als startende funktion mit callback umzuschreiben.

function testAnimation() {
    var stopp = false;      // Schalter zum Stoppen des Codefluss
    var obj = $("#animate");
    
    stopp = true;

    obj.animate({fontSize: '3em'}, "300" , function() {
        stopp = false;
    });

// hier fügst du ein:
// }
// function callback()
// {
// und schon hast du ein callback
// benötigst du hier im callback noch zustände aus dem obigen code, erzeugst du eine closure 
// fertig
    
    console.log("Animation fertig");

}

 

[znieh99]

dein fall - eigentlich jeder - ist problemlos als startende funktion mit callback umzuschreiben.

function testAnimation() {
    var stopp = false;      // Schalter zum Stoppen des Codefluss
    var obj = $("#animate");
    
    stopp = true;

    obj.animate({fontSize: '3em'}, "300" , function() {
        stopp = false;
    });

// hier fügst du ein:
// }
// function callback()
// {
// und schon hast du ein callback
// benötigst du hier im callback noch zustände aus dem obigen code, erzeugst du eine closure 
// fertig
    
    console.log("Animation fertig");

}

Ich verstehe nicht wie die 'function callback' aufgerufen wird? Für mich ist die function in 'obj.animate' das callback oder liege ich da falsch?

 

[tsseh]

das callback in

obj.animate({fontSize: '3em'}, "300" , function() {
        stopp = false;
    });

ist

function() {
        stopp = false;
    }

dort kannst du dein callback übergeben

obj.animate({fontSize: '3em'}, "300" , callback);

- - - Aktualisiert - - -

oder so

<html>
  <head>
    <title></title>
    <script src="jquery.js"></script>
    <script>
      $(function()
      {
        function testAnimation()
        {
          var deferred = jQuery.Deferred();
          var obj = $("#animate");
          obj.animate({fontSize: '3em'}, "300" , function() {
            deferred.resolve(obj);
          });
          return deferred.promise();
        }
        
        var testAnimationReady = testAnimation();
        $.when(testAnimationReady).then(function(obj)
        {
          console.log(obj, "Animation fertig");
        });
      });
    </script>
  </head>
  <body>
    <div id="animate">animate</div>
  </body>
</html>

 

[znieh99]

dort kannst du dein callback übergeben...

- - - Aktualisiert - - -

oder so....

Das 'oder so' muss ich erst mal analysieren,
danke einstweilen

 

[znieh99]

<html>
  <head>
    <title></title>
    <script src="jquery.js"></script>
    <script>
      $(function()
      {
        function testAnimation()
        {
          var deferred = jQuery.Deferred();
          var obj = $("#animate");
          obj.animate({fontSize: '3em'}, "300" , function() {
            deferred.resolve(obj);
          });
          return deferred.promise();
        }
        
        var testAnimationReady = testAnimation();
        $.when(testAnimationReady).then(function(obj)
        {
          console.log(obj, "Animation fertig");
        });
      });
    </script>
  </head>
  <body>
    <div id="animate">animate</div>
  </body>
</html>

Ja, das funktioniert, aber ich weiß nicht ganz warum?
1) $(function() : Ist wohl eine anonyme Funktion. Warum? Sie ist ohne Parameter und wird dann doch mit function(obj) aufgerufen?
2) =jQuery.Deferred() : Übergibt ein Object, aber was ist das?
3) .resolve(obj), .promise() : Was tun diese Funktionen?
4) $.when(testAnimationReady).then(function(obj) : Wenn ...Ready dann function(obj) oder/und console.log() ?
5) $(function() wird nie aufgerufen, wie kann sie dann arbeiten?

Ich weiß, das sind viele Fragen aber ich will halt wissen was ich da so mache,
lg Heinz

zu 5) ist mir jetzt klar, habe in W3Schools geschmökert.

 

[kkapsner]

Ist wohl eine anonyme Funktion.

Ja.

Warum?

Weil sie keinen Namen hat.

Sie ist ohne Parameter und wird dann doch mit function(obj) aufgerufen?

Nein, das ist eine andere anonyme Funktion.

Übergibt ein Object, aber was ist das?

Schon mal was von Dokumentation gehört? https://api.jquery.com/jQuery.Deferred/

Was tun diese Funktionen?

Dito... beschäftige dich vorher aber mal mit dem Thema Promises genauer. Dann verstehst du die Dokumentation auch besser.

zu 5) ist mir jetzt klar, habe in W3Schools geschmökert.

Hab' da schon lange nicht mehr draufgesehen, aber die Qualität war da mal extrem schlecht. Lese lieber direkt in der Dokumentation/Spezifikation nach. Die von jQuery ist eigentlich recht gut.

 

[znieh99]

Danke, werde ich tun.