我正在尝试制作一个简单的列表,其中每个项目将依次显示
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src = "async.js"></script>
</body>
</html>
脚本
let list = [
{
name: 'one',
},
{
name: 'two',
}
]
let output = '';
function print(){
setTimeout(()=>{
list.forEach(function(element){
output = `<li>${element.name}</li>`; // critical line
document.body.innerHTML += output;
})
},500)
}
function add(element){
setTimeout(() =>{
list.push(element);
},400)
}
add({name: 'three'});
let c=0;
setTimeout(()=>{ // waits for add function to be executed
for(let i=0;i<list.length;i++){
setTimeout(print,c);
c+=1000;
}
},1000)
问题是输出值每次迭代都会获取所有名称并打印 3 个名称 3 次,而不是当时打印 1 个名称。你能解释一下吗?
德玛西亚99
相关分类