javascript - 遍历字符串数组只返回每个字符串中的一个字母

Question

我试图通过让它循环遍历一个字符串数组并在 3 秒延迟后显示每个字符串来测试 javascript 中的计时函数，但是当我调用该函数时，它有一个奇怪的模式，只取第一个字母的第一个字母字符串，然后是第二个字符串的第二个字母，依此类推......如果说数组中的第四个项目没有第四个字母，它会打印未定义。请帮忙。谢谢

function myFunc () {
    setTimeout(function () {
        var contacts = {
            addressBook : [
            {
                'name' : 'Jane',
                'email' : 'JaneDoegmail.com'
            },
            {
                'name' : 'Meggie',
                'email' : 'meggiegmail.com'
            },
            {
                'name' : 'John',
                'email' : 'johnDoegmail.com'
            },
            {
                'name' : 'Paul',
                'email' : 'paulgmail.com'
            },
            {
                'name' : 'Bo',
                'email' : 'bogmail.com'
            }
            ]
        };
        var object = contacts.addressBook;
        var i;
        for (var i = 0; i < object.length; i++) {
            var item = object[i];
            var name = item.name;
            var email = item.email;

            document.write(name[i]);
        };

        if (i < 10) {
            myFunc();
        };
    }, 3000)
}
myFunc();

Answer 1

这是一个working jsFiddle demo

基本上，根据您的指示，您的输出是正确的，它向您显示名称字符串索引处的字符。您应该使用 (name) 而不是 (name[i])。

但是，我认为这可能是您想要的: suggested improvement demo

基本上，它允许循环由一个计数器进行外部控制，该计数器将随着调用而递增，并在显示所有联系人地址后停止。

js:

var c = document.getElementById("console");
var contacts = {
  addressBook : [
    {
        'name' : 'Jane',
        'email' : 'JaneDoegmail.com'
    },
    {
        'name' : 'Meggie',
        'email' : 'meggiegmail.com'
    },
    {
        'name' : 'John',
        'email' : 'johnDoegmail.com'
    },
    {
        'name' : 'Paul',
        'email' : 'paulgmail.com'
    },
    {
        'name' : 'Bo',
        'email' : 'bogmail.com'
    }
  ]
};
var i = 0;
(function myFunc () {
 var item = contacts.addressBook[i++];
 var name = item.name;
 var email = item.email;
 c.innerHTML += name +", " + email + "<br>";
 if (i < contacts.addressBook.length) {
  setTimeout(myFunc,3000);
 }
})()