• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Array/Objekt nacheinander (mit "Pausen") durchgehen?

M

mastema

New member
Moin,

ich habe einen Array (bzw Objekt in JS?, ist halt ursprünglich ein PHP-Array, den ich via json_encode() an JS übergebe) mit verschiedenen Daten, dieses will ich nacheinander abarbeiten, d.h. für jeden Eintrag soll etwas passieren (um genau zu sein, eine Änderung eines CSS Wertes per jQuery), dann soll kurz gewartet werden (dafür habe ich mir eine provisorische "sleep()" Funktion gesucht) und dann halt mit dem nächsten Wert weiter gemacht werden.

Theoretisch funktioniert es auch, nur dass nicht zwischen den Schritten gewartet wird, sondern einfach nach Ablauf der Gesamtzeit alles direkt auf einmal passiert (laut Konsole werden alle Schritte ausgeführt, aber eben auf einmal, wodurch man nur den Sprung vom ersten zum letzten sieht).

Ich versuchs mal etwas vereinfacht darzustellen was ich bisher gemacht habe:

Code: 
function foo () {
  data.forEach(function(entry) {
    console.log(entry); // Zeigt das richtige an, so weit funktionierts also

    $('#blubb').css('width', entry.p + '%'); // Verkleinert die Länge eines Balkens
    sleep(1500);
  });
}

"sleep" Funktion:
Code: 
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Sagen wir also mal in "data" sind nun 5 Einträge, dann werden die laut Konsole wie geplant zwar nacheinander ausgeführt, aber es werden eben einfach nach 7,5 Sekunden alle Schritte auf einmal ausgeführt (auch in der Konsole direkt alles angezeigt, nicht nacheinander) und nicht, wie es sein soll, "Schritt 1 => 1,5 Sekunden warten => Schritt 2..." etc.

Was mache ich falsch / woran liegt das bzw wie kann ich halt erreichen, dass Werte aus einem Array/Objekt tatsächlich nacheinander abgearbeitet werden (so dass es, wie in diesem Fall z.B. angedacht, so aussieht als ob ein Balken langsam von 100% auf 0% schrumpft)?

Die genutzte jQuery Version ist btw 3.1.0, falls das wichtig ist.
 
Ok, da hab ich mich wohl doch etwas zu allgemein ausgedrückt, diese Funktion ist zwar durchaus interessant und werde ich zumindest an anderer Stelle bestimmt auch noch gebrauchen können, aber für den konkreten Fall hilft die denke ich leider nicht wirklich (korrigiert mich wenn ich falsch liege).

Denn um genau zu sein handelt es sich bei dem, was ich vor habe, nicht nur um einen Balken, sondern um zwei, und es soll auch gar keine "fließende" Animation sein, sondern tatsächlich ein Schritt nach dem anderen, mit je einer kurzen Pause halt. Um es mal genauer zu beschreiben, es soll ein "Bosskampf" für ein kleines Browsergame werden, d.h. ich habe 2 Balken (Lebensbalken), einer vom Spieler und einer vom Boss. Der Kampfverlauf selbst wird in PHP ermittelt, in einem Array gespeichert und dann nur noch via json_encode() an JS übergeben. In diesem Array/Objekt stehen dann jeweils die "Runden" des Kampfes, in jeder Runde schlägt halt jeder der beiden einmal zu und zieht dem Gegner dann entsprechend etwas von seinem Balken ab (verändert sowohl die Balkenbreite als auch den, ebenfalls dort angezeigten, absoluten und prozentualen HP-Wert). Dabei soll nun halt nach jedem Angriff jeweils eine kurze Pause eingelegt werden (und ggf noch eingeblendet werden "XY ist nun am Zug" oder so, aber das ist ja nicht das Problem (wenn denn das mit dem nacheinander ausführen und Pausieren mal funktionieren würde)).

Also zusammengefasst: Ich habe einen kompletten Kampfverlauf in einem Array/Objekt gespeichert und will den per JS darstellen, also sinkende Lebensbalken / HP-Anzeige etc (der Wechsel von z.B. 100% auf 80% darf natürlich auch gern animiert sein (geht, wenn ichs richtig verstanden habe, aber auch mit animate()?), aber wichtiger sind die Pausen dazwischen und dass sich die Balken abwechselnd reduzieren).
 
Habe ich beides schon versucht, also sowohl ein delay bei der jQuery Funktion anzufügen, z.B.
Code: 
$('#blubb').delay(1500).css('width', p + '%');
als auch mit setTimeout, z.B. so:
Code: 
var bla = window.setTimeout($('#blubb').css('width', p + '%'), 1500);

Oder stimmt daran was nicht?

Mit beiden Varianten wurden sämtliche Änderungen jedenfalls auch erst nach Ablauf der gesamten Wartezeit auf einmal durchgeführt, also direkt zum letzten Schritt gesprungen (bzw wurden laut Konsole alle durchgeführt, aber weil nicht dazwischen gewartet wurde sieht man eben nur den letzten Schritt).

PS: Bei beiden Varianten habe ich es jeweils einmal mit einem festen Delay-Wert versucht, als auch mit einem, der sich bei jedem Schritt erhöht (damit es trotzdem nacheinander angezeigt wird, auch wenn alles sofort ausgeführt wird, aber selbst das ging nicht, gleiches Ergebnis, alle Änderungen auf einmal...).
 
Code: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">» Run</button>
<div id="block">Hello!</div>
 
<script>
// Using multiple unit types within one animation.
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "90px"
  }, 500 ).delay(2000).animate({
    width: "80px"
  }, 500 ).delay(2000).queue(function()
  {
    $( "#block" ).css("background-color", "red")
    $( this ).dequeue();
  }).delay(2000).queue(function()
  {
    $( "#block" ).css("background-color", "blue")
    $( this ).dequeue();
  });
});
</script>
 
</body>
</html>
 
Ok, danke, hilft mir auf jeden Fall schon mal weiter, auch wenn ich dann wohl ganz anders ansetzen muss (da ich ja im voraus nie weiß, wie viele Schritte es gibt und wie groß die sind), das sollte sich aber lösen lassen indem ich den JS Code einfach direkt per PHP erstelle statt nur den Verlauf zu übergeben.

Ich habe mir dein Beispiel nun mal so angepasst, dass es auch mit 2 Balken funktioniert, die sich nacheinander bewegen, was mir nun noch fehlt, ist eine Möglichkeit auch die Beschriftung der Balken jeweils mit anzupassen, ich habe das so versucht: https://jsfiddle.net/twv7Ldj0/3/

Aber wie man sieht wird auch hier wieder direkt zum letzten Schritt (0%) gesprungen, statt einen nach dem anderen zu machen...
 
Code: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">» Run</button>
<div id="block1">Hello!</div>
<div id="block2">Hello!</div>
 
<script>
// Using multiple unit types within one animation.

var jsonData = [
  {
    id: "#block1",
    width: "90px",
    text: "90%"
  },
  {
    id: "#block2",
    width: "70px",
    text: "70%"
  },
  {
    id: "#block1",
    width: "30px",
    text: "30%"
  },
  {
    id: "#block2",
    width: "10px",
    text: "10%"
  },
  {
    id: "#block1",
    width: "0px",
    text: "0%"
  }
];
 
$( "#go" ).click(function()
{
  $.each(jsonData, function(i,e)
  {
    $(document).delay(2000).queue(function()
    {
      $(e.id).css("width", e.width).html(e.text);
      $(this).dequeue();
    });
  });
});
</script>
 
</body>
</html>
 
Danke dir :)

Funktioniert so weit sehr gut, 1 oder 2 Kleinigkeiten muss ich zwar noch ändern, aber das wird schon, ich konnte sogar den größten Teil meines Codes weiter verwenden, was mir fehlte war im Grunde letztlich vor allem das:
Code: 
$(document).delay(2000).queue(function() {
     ...
      $(this).dequeue();
    });

Damit scheint das nacheinander ausführen nun jedenfalls zu funktionieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben