猿问

为什么在 forEach 迭代中为变量分配了多个值?

我正在尝试制作一个简单的列表,其中每个项目将依次显示


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 个名称。你能解释一下吗?


小怪兽爱吃肉
浏览 86回答 1
1回答

德玛西亚99

该列表以两个项目开头。add({name: 'three'});增加了三分之一for(let i=0;i<list.length;i++){循环遍历列表并调用setTimeout(print,c);3 次(因为列表中有 3 个东西)function print(){打印列表中的三件事中的每一个(由于第 3 步,它运行了三次)。所以......如果我正确理解你的误解:print打印列表中的每个项目,因为它循环遍历列表。print&nbsp;不打印特定项目,因为它 (a) 并非旨在打印一个项目,并且 (b) 您没有向它传递一个参数来告诉它无论如何要打印哪个项目。可能你想要一些类似的东西:let list = [{&nbsp; &nbsp; name: 'one',&nbsp; },&nbsp; {&nbsp; &nbsp; name: 'two',&nbsp; },&nbsp; {&nbsp; &nbsp; name: 'three'&nbsp; }];let current_index = 0;function print() {&nbsp; const element = list[current_index];&nbsp; if (!element) {&nbsp; &nbsp; return; // end of the list&nbsp; }&nbsp; const output = `<li>${element.name}</li>`;&nbsp; document.querySelector("ul").innerHTML += output;&nbsp; current_index++;&nbsp; setTimeout(print, 1000);}setTimeout(print, 1000);<ul></ul>...您可以在其中跟踪您正在处理的数组中的哪个元素,并在将数据添加到 HTML 时递增计数器,而不是在一个直接循环中全部添加。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答