HTML-Canvas-Tag für jede AJAX-Anfrage mit neuen Daten aktualisieren
Ich möchte meine Arbeitsfläche bei jeder AJAX-Anfrage aktualisieren, wenn ein neuer Benutzer gefunden wird oder eine neue Verbindung vorhandener Benutzer besteht.
Ich habe Benutzer und Verbindungen zwischen ihnen:
%Vor% Im obigen Beispiel ist Benutzer mit Id:38 mit user 39 and 40 verbunden und user 39 is connected to user 40 and user 40 ist bereits mit user 39 and user 38 so user 40 Connection array is blank verbunden.
Ich habe einen Webdienst, den ich alle 1-2 Sekunden auslösen werde, um neu hinzugefügte Benutzer auf dieser Seite anzuzeigen, und neue Verbindungen zwischen vorhandenen Benutzern, die ich in meiner Tabelle gespeichert habe, und dieser Webdienst holt alle Benutzer mit ihren Verbindungen .
Also zuerst wird meine Seite geladen, aber danach wird meine Seite nicht aktualisiert und neue Benutzer sollten angezeigt werden und neue Verbindungen sollten mit einem AJAX-Anruf zu meinem Web-Service verbunden werden.
Aber mit Ajax-Anfrage wird alles durcheinander gebracht. Dies ist ein JSBin, das ich erstellt habe .
Ausgabe, die ich bekomme:
Ich habe nur 4 Benutzer und 3 Verbindungen, wie Sie in meiner JSBin-Ausgabe sehen können, dann sollten es nur 4 Rechtecke sein und ich werde nicht mehr Benutzer hinzufügen, aber immer noch diese unordentliche Ausgabe bekommen.
Quellcode-Referenz: Referenzgeige
Ich versuche, die Ausgabe wie in obiger Geige gezeigt, aber nicht zu bekommen.
Erwartete Ausgabe : 4 Rechtecke mit Animation
Aktualisierte Js bin-Demo : JSBin aktualisiert
>Mit dem oben aktualisierten JSBin bekomme ich diese Ausgabe, aber sie bewegen sich nicht (Animation funktioniert nicht):
2 Antworten
Die Boxen bewegen sich nicht, weil der Code zum Verschieben nie aufgerufen wird.
Wenn Sie den Teil verschieben, der die Boxen von updateUsers() animiert, werden Sie animiert.
Verschiebe den Abschnitt von diesem Teil:
%Vor%hierhin:
%Vor%Da wir keinen Zugriff auf den von Ihnen verwendeten Webdienst haben und angenommen wird, dass die Daten korrekt zurückgegeben werden, musste ich die vordefinierten Daten auskommentieren, um eine funktionierende Demo zu erstellen:
Ich habe mit deiner Quellcode-Referenz-Fiddle gearbeitet, was mir ziemlich gut ging.
Ein paar Dinge hinzugefügt:
Zuerst eine separate Funktion zum Hinzufügen eines Benutzers zum users -Array. Auf diese Weise können Benutzer nach einem erfolgreichen Webservice-Aufruf einfach hinzugefügt werden.
Zweitens wurden einige Hilfsfunktionen hinzugefügt, um zufällige Positionen und Richtungen zu erhalten.
%Vor% Wenn Sie Ihren Webservice verbinden, können Sie die getRandomConnections -Funktion und Referenz löschen.
Stellen Sie in Ihrem Webservice-Rückruf sicher, dass Sie ein Objekt im folgenden Format haben:
Übergeben Sie dieses Objekt an die Funktion addUser .
Tags und Links javascript html jquery canvas html5-canvas