配列の長さが増えるたびに新しいコンテンツをページに動的に追加するにはどうすればよいですか？

私はランダムな間隔で配列に新しい文字列を追加する関数を持っています。配列の長さが増えるたびに、javascriptで表示したり、新しい文字列をjqueryでページに表示するにはどうすればよいですか？配列の長さが増えるたびに新しいコンテンツをページに動的に追加するにはどうすればよいですか？

出典

2016-08-23 lfkwtz

AnglesJS（最良の解決策）を見たり、jQueryを使って要素にHTMLを設定するには、$（ "span.array_length"）.html（array_name.length）;および 0 ' –

Angular、React、Vueなどのインタラクティブライブラリを使用できます。または、ネイティブのJavaScriptインターバルを使用して、毎回配列を確認してください。 – Mojtaba

これはコードを持つのに役立ちます。文字列を追加する関数はjQueryの '.append（）'を使うことができますか？ – dhc

あなたは、アレイ表示コンテナ（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>

をそれとも、賢くそれを作ると、コンテナを更新することができた場合のみ、アレイの長さが変わった。

さらに、表示コンテナの更新コールバックを配列更新関数に渡して、配列を更新するたびに配列を表示し直すだけです。

<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>

内部的に、角度および他のフレームワークは、これらのアプローチの組み合わせを実装しています。

重要な注意：アプリケーションによっては、ページを更新してインターフェイスの応答性とパフォーマンスを維持するためのさまざまな方法を試してみることをおすすめします。たとえば、配列要素があまりにも頻繁に追加された場合は、GUIの更新間隔を間に合わせることができます。また、配列の既存の要素が変更されていない場合は、最初の例のように、DOMモデルに要素を追加し続けることもできます（2番目の例を参照）。 Angularのような専用のフレームワークを使用する場合は、同様の問題を考慮する必要があります。

出典

2016-08-23 19:34:15 Maksym

これにはすべてのタイプの問題があります。このようにinnerHTMLを使用すると、完了したすべての要素が毎回画面に書き換えられます。少なくとも、それはUIにスパスを引き起こし、さらに悪い場合には重大なパフォーマンスの問題を引き起こします。ネイティブのjavascriptには、DOM要素を追加するためのappendとprependメソッドがあり、jQueryを参照して以来、これは素晴らしい提案ではありません。IMHO – QBM5

JavaScriptの最後の例を追加しました。私の答えは、データの更新に基づいてGUIを更新する方法に焦点を当てました。詳細なコンテキストがなくても、質問の作成者が何であるかを知るのは難しいです。パフォーマンスに関する考慮事項は、独自のスレッドに値するかもしれません。 – Maksym

とにかくオペレーションのようには見えません。私が助けに時間がかかるときに大好き、彼らはただ私の応答をぶら下げておきます。 – QBM5

ノックアウトや角度のようなプロパティのサブスクリプションを扱うライブラリを使用することをお勧めしますが、これは質問に記載されていないので、この例を挙げます。

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)); 
}

そしてちょうどこのコードは、実用よりも楽しいです

someArray.push(someRecord);  
// or 
someArray(record1, record2, record3....);

通常のArray.pushのようにそれを呼び出す、私は再びプロパティのサブスクリプションを処理するライブラリをお勧めします。

出典

2016-08-23 19:46:47 QBM5

配列の長さが増えるたびに新しいコンテンツをページに動的に追加するにはどうすればよいですか？

答えて

関連する問題