使用setinterval JavaScript更新后的数组计数不匹配

Question

我正在显示Object数组中的数据。数组的长度为4.

var employees = [
    { name: "Santosh", age:25, emp_id:23 },
    { name: "jyoti", age:93, emp_id:97 },
    { name: "abhishe", age:99, emp_id:96 },
    { name: "Amir", age:77, emp_id:16 }
];

现在我试图每1秒增加4,5,6,7,8这样的数据。它按预期工作完美，直到， 我希望在数据到达第5位时更新数据。

var employees = [
    { name: "Santosh", age:25, emp_id:23 },
    { name: "jyoti", age:93, emp_id:97 },
    { name: "abhishe", age:99, emp_id:96 },
    { name: "Amir", age:77, emp_id:16 }
];



var newemp = employees;

var i, text;
function update_array_with_time(){

    employees.push(employees[3]);//repeating this data

    text = "<ol id='newid'>";
    for(i=0; i<newemp.length; i++) {
        var newage = newemp[i].age.toString().split("").reverse().join(""); // reversing age    
        text+= "<li>"+newemp[i].name+"-"+newemp[i].emp_id + "-" + newage + "</li>";
    }
    text += "</ol>";
    document.getElementById("list_emp").innerHTML = text;

    var len = employees.length;
    console.log(len);
    if(len === 5) {
        employees[5] = employees[0];
    } else if(len===8) {
        window.clearInterval(setIntv);
    }
}
var setIntv = setInterval(update_array_with_time, 1000);

现在，如果你看到我的控制台消息，我打印了数组的长度，5之后没有6，第6和第7项被加在一起。这让我烦恼。

它应该首先在他们自己的时间增加第6和第7。为什么它不是在统一的时间显示？

更新

在@ guest271314的帮助下，我已按顺序成功显示它，但数据是轻弹的。 https://embed.plnkr.co/Ms8M2JDsONkAUggyAY0e/

Answer 1

在employees[5] = employees[0];，您分配的employees[5]是undefined。 .length从0开始，当.length为5时，选择使用4的数组的最后一个元素，然后应增加.length employees到6。

if (len === 5) {
    employees[4] = employees[0];
} else if(len===8) {
    window.clearInterval(setIntv);
}

  

整体而言，序列是正确的。但是当你运行代码时   你第一次看到没有。 5更新数据'Amir'首先和下一个时间间隔它自动更新到Santosh它是   轻弹是否有任何可能性首先显示Santosh   实例

将for循环移至if..else语句之后。

if(len === 5) {
    employees[4] = employees[0];
} else if(len===8) {
    window.clearInterval(setIntv);      
}

text = "<ol id='newid'>";
for(i=0; i<newemp.length; i++) {
    var newage = newemp[i].age.toString().split("").reverse().join(""); 
    text+= "<li>"+newemp[i].name+"-"+newemp[i].emp_id + "-" + newage + "</li>";
}
text += "</ol>";
document.getElementById("list_emp").innerHTML = text;

Answer 2

如果您有5名员工，则运行employees[5]=employees[0]。这基本上增加了第六名员工，因为员工从零开始计算。