我正在尝试制作一个简单的列表，其中每个项目将依次显示
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src = "async.js"></script>
</body>
</html>
java脚本
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 个名称。你能解释一下吗？
最佳答案
- 列表以两项开始。
-
add({name: 'three'});添加第三个 -
for(let i=0;i<list.length;i++){循环列表并调用setTimeout(print,c);三次(因为列表中有三件事) -
function print(){打印列表中的三件事中的每一项(由于步骤 3，它运行了三次)。
所以......如果我正确理解你的误解:
print打印列表中的每个项目，因为它循环遍历列表。
print 不打印特定项目，因为它 (a) 不是为打印一项而设计的，并且 (b) 您没有向它传递一个参数来告诉它要打印哪一项。
您可能想要以下内容:
let list = [{
name: 'one',
},
{
name: 'two',
},
{
name: 'three'
}
];
let current_index = 0;
function print() {
const element = list[current_index];
if (!element) {
return; // end of the list
}
const output = `<li>${element.name}</li>`;
document.querySelector("ul").innerHTML += output;
current_index++;
setTimeout(print, 1000);
}
setTimeout(print, 1000);<ul></ul>…您可以在其中跟踪正在处理的数组中的哪个元素，并在将数据添加到 HTML 时递增计数器，而不是全部在一个立即循环中进行。
关于javascript - 为什么在 forEach 迭代中为变量分配多个值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60894576/