javascript - 使用递归函数动态更新数组

Question

我很难让对象数组显示并动态更新。

预期输出是学生对象数组，每 5 秒更新一次。含义一个新的学生对象将被添加到数组中。

这是我的功能:

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 = [];

我创建了 updateTest() 函数，该函数由 getStudents() 函数递归调用:

    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 />";
        }
    }

现在，每次调用 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();