我正在尝试制作一个简单的列表，其中每个项目将依次显示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 个名称。你能解释一下吗？
1 回答
德玛西亚99
TA贡献1770条经验 获得超3个赞
该列表以两个项目开头。
add({name: 'three'});增加了三分之一for(let i=0;i<list.length;i++){循环遍历列表并调用setTimeout(print,c);3 次（因为列表中有 3 个东西）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 时递增计数器，而不是在一个直接循环中全部添加。
添加回答
举报
0/150
提交
取消