Ich habe eine Funktion, die einem Array in zufälligen Abständen neue Zeichenfolgen hinzufügt. Wie kann ich jedes Mal, wenn die Länge des Arrays zunimmt, mit jedem neuen String auf meiner Seite mit Javascript und/oder jquery anzeigen?Wie kann ich bei jeder Erhöhung der Array-Länge dynamisch neue Inhalte zu meiner Seite hinzufügen?
Sie können eine rekursive Timer-Funktion einstellen, dass Ihr Array Display Behälter jedes Mal aktualisiert wird sie genannt wird (angepasst von Javascript dynamic array of strings):
<html>
<body>
<script type="text/javascript">
var arr = [];
function add() {
arr.push("String " + Math.random());
}
function show() {
var html = '';
for (var i = 0; i < arr.length; i++) {
html += '<div>' + arr[i] + '</div>';
}
var con = document.getElementById('container');
con.innerHTML = html;
}
function start() {
setTimeout(function() {
add();
// Note: you can call show in an independent timeout
show();
start();
}, 1000);
}
</script>
<input type="button" onclick="start();" value="start" />
<br />
<div id="container"></div>
</body>
</html>
Oder man kann es klüger machen und den Behälter nur aktualisieren, wenn die Arrays Länge geändert. Eine andere Möglichkeit besteht darin, einen Display-Container-Update-Callback an Ihre Array-Update-Funktion zu übergeben, so dass Sie jedes Mal, wenn Sie Ihr Array aktualisieren, Ihr Array neu anzeigen lassen.
<html>
<body>
<script type="text/javascript">
var arr = [];
var lastDisplayed = 0;
function add() {
arr.push("String #" + lastDisplayed + ": " + Math.random());
show(); // Update display container
};
function show() {
var node;
var textnode;
var container = document.getElementById('container'); // Get parent container
for (; lastDisplayed < arr.length; lastDisplayed++) {
node = document.createElement("li"); // Create a <li> node
textnode = document.createTextNode(arr[lastDisplayed]); // Create a text node
node.appendChild(textnode);
container.appendChild(node);
}
};
function start() {
setTimeout(function() {
add();
start();
}, 1000);
};
</script>
<input type="button" onclick="start();" value="start" />
<br />
<ul id="container"></ul>
</body>
</html>
Intern implementieren Angular- und andere Frameworks eine Kombination dieser Ansätze.
Wichtiger Hinweis: Abhängig von Ihrer Anwendung sollten Sie verschiedene Ansätze zum Aktualisieren Ihrer Seite ausprobieren, um die Reaktionsfähigkeit und Leistung der Benutzeroberfläche zu erhalten. Zum Beispiel möchten Sie möglicherweise Ihre GUI-Updates zeitlich auffüllen, wenn Array-Elemente zu oft hinzugefügt werden. Sie sollten auch weiterhin Elemente zu Ihrem DOM-Modell hinzufügen (siehe das zweite Beispiel), anstatt es neu zu schreiben (wie im ersten Beispiel), wenn die vorhandenen Elemente Ihres Arrays unverändert bleiben. Ähnliche Probleme müssen möglicherweise bei Verwendung eines dedizierten Frameworks wie Angular berücksichtigt werden.
Es gibt alle Arten von Problemen damit. Die Verwendung von innerHTML würde dazu führen, dass alle fertiggestellten Elemente jedes Mal neu auf den Bildschirm geschrieben werden. Zumindest würde es dazu führen, dass die Benutzeroberfläche spaziert und im schlimmsten Fall schwerwiegende Leistungsprobleme verursacht. Natives Javascript hat append und prepend Methoden zum Hinzufügen von DOM-Elementen im laufenden Betrieb, und da er auf jQuery verwiesen ist dies kein großer Vorschlag IMHO – QBM5
Letzte Beispiel mit JavaScript anhängen aktualisiert. Meine Antwort konzentrierte sich auf die Art und Weise, wie die GUI auf der Grundlage der Datenaktualisierungen aktualisiert werden kann. Es ist schwer zu sagen, um was es sich bei dem Autor der Frage handelt, ohne einen detaillierteren Kontext. Leistungsaspekte könnten ihren eigenen Thread verdienen. – Maksym
Sieht nicht so aus, als ob sich der OP sowieso interessiert. Liebe, wenn ich mir Zeit nehme zu helfen und sie lassen meine Antwort einfach hängen. – QBM5
Ich würde empfehlen, eine Bibliothek zu verwenden, die Eigentum Subskriptionen wie Knockout oder eckig behandeln, aber da das nicht in der Frage erwähnt wird, werde ich dieses Beispiel geben.
var someArray = [];
var standardPush = someArray.push;
someArray.push = function(){
// depending on your requirements you can switch these next two lines around
for (var i = 0; i < arguments.length; i++) {
updateUI(arguments[i]); // call code to update UI
standardPush(arguments[i]); // actually ad record to array
}
}
function updateUI(record){
// Some code that updates your UI
// example
$("#container").append($("<div>").text(record));
}
dann nennen Sie es wie ein normales Array.push
someArray.push(someRecord);
// or
someArray(record1, record2, record3....);
Dieser Code mehr Spaß als praktisch ist, würde ich wieder eine Bibliothek empfehlen, die Eigenschaft Abonnements behandelt.
Ein Blick in AngularJS (beste Lösung) oder jQuery verwenden, um HTML auf ein Element wie: '$ (" span.array_length ") .html (array_name.length);' und ' 0 zu setzen ' –
Sie können eine interaktive Bibliothek wie Angular, React, Vue, ... verwenden. Oder verwenden Sie ein natives JavaScript-Intervall und überprüfen Sie das Array jedes Mal – Mojtaba
Es würde helfen, etwas Code zu haben. Kann die Funktion, die die Zeichenfolgen hinzufügt, nur jquery '.append()' verwenden? – dhc