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

Using a recursive function to dynamically update an array

本文关键字：更新 数组 动态 递归函数      更新时间：2023-09-26

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

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

这是我的功能

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

现在它在数组中创建一个对象，但是停止了。我该怎么做呢?我做错了什么?

点击此处进行说明。

(Thank you for your help advance)

我再次添加了<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()，每次调用getStudents()函数，您将看到学生列表增长。

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

现在它在数组中创建一个对象，但是会停止。

问题是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/

您只在第一次调用后记录一次。如果将console.log移动到函数中，它将记录数组每5秒增加一个元素

相关文章：