再帰関数を使用して配列を動的に更新する

Question

オブジェクトの配列を表示して動的に更新するのは苦労しています。

予想される出力は、5秒ごとに更新される生徒オブジェクトの配列になります。意味新しい生徒objが配列に追加されます。

これは私の関数である：

var students = []; 

function getStudents() { 
    var student = {}; 
    student.name = 'example name'; 
    student.id = 1; 
    students.push(student); 
    // recursive 
    setTimeout(getStudents, 5000); 
    return students; 
} 

getStudents(); 

は、今のところは、アレイ内のオブジェクトを作成しますが、停止します。どうすればこの作品を作れますか？私は間違って何をしていますか？

Fiddle hereを例示する。

は、アレイ内のオブジェクトを作成しますが、停止した今

Answer 1

再び、出力を収集するために<div id="test">要素を追加しました。

<div id="test"> 
</div> 

いくつかの配列を作成して、データを操作しました。

// Here's an array of students we can add for test purposes... 
    // 
    var arrStudents = [ "Rita", "Sue", "And", "Bob", "too" ]; 
    var arrIDs = [ 123, 234, 345, 456, 567 ]; 

    // We can populate 5 students with the above data, this will 
    // keep track of the number of students added. 
    //  
    var intStudents = 0; 

    var students = []; 

私は再帰的にgetStudents()関数によって呼び出される関数updateTest()を作成しました：

function updateTest() { 
     var a; 

     document.getElementById('test').innerHTML = ""; 

     for (a = 0; a < students.length; a++) { 
      // Append the output to innerHTML 
      // 
      document.getElementById('test').innerHTML += 
       a.toString() + 
       ": Student name: " + students[a].name + 
       ", ID: " + students[a].id + "<br />"; 
     } 
    } 

は今getStudents()関数が呼び出されるupdateTest()たびに呼び出して、あなたは学生のリストが育つ表示されます。

function getStudents() { 
     var student = {}; 

     if (intStudents < 5) { 
      // Add one of the students from our arrays. 
      // 
      student.name = arrStudents[intStudents]; 
      student.id = arrIDs[intStudents]; 
     } 
     else { 
      // Just keep adding this when we run out of students. 
      // 
      // We can still use intStudents to generate a unique 
      // name and id. 
      // 
      student.name = 'example name ' + intStudents.toString(); 
      student.id = intStudents; 
     } 

     intStudents++; 

     students.push(student); 

     // recursive 
     setTimeout(getStudents, 5000); 

     // call updateTest() each time to update the div... 
     // 
     updateTest(); 
    } 

    getStudents(); 

Answer 2

（事前にご協力いただきありがとうございます）。

問題はconsole.log(students)が再帰関数呼び出しの外部で一度呼び出されています。あなたが唯一の最初の呼び出しの後に一度ログインしているconsole.log(students)

function getStudents() { 
    var student = {}; 
    student.name = 'example name'; 
    student.id = 1; 
    students.push(student); 
    console.log(students); 
    // set recruive 
    setTimeout(getStudents, 5000); 
} 

再帰関数内jsfiddle https://jsfiddle.net/88r0rj8n/3/

Answer 3

が含まれます。関数内にconsole.logを移動すると、5秒ごとに要素が1つ増えてログに記録されます