javascript - 使用 setTimeOut 在 3 秒后一个一个地显示标记。为什么它只显示最后一个标记？

Question

我正在尝试使用 setTimeOut 一个一个地显示标记，但它不起作用。这是我的代码:

function showOneByOne(arrayOfMarkersObj) {
    for (u in arrayOfMarkersObj) {           
        setTimeout(function() {      
            arrayOfMarkersObj[u].setVisible(true);
        }, 3000);
    }
}

问题是它只显示 map 上的最后一个标记，而不是所有标记。但是，如果我把

arrayOfMarkersObj[u].setVisible(true);

在 setTimeOut 之外，它显示所有标记。

为什么会这样？

Answer 1

将键存储到一个数组中(如果您只使用支持 ECMA5 的浏览器，您可以按照评论中的建议使用 Object.keys() 代替:

var keys = [];
for (u in arrayOfMarkersObj)
    keys.push(u); //assuming arrayOfMarkersObj is an object not an array?

现在在您的 setTimeout 中逐一进行:

var current = 0;

function reveal() {
    arrayOfMarkersObj[keys[current++]].setVisible(true);
    if (current < keys.length) setTimeout(reveal, 3000);
}
reveal();

如果你想要第一个延迟切换最后一行:

setTimeout(reveal, 3000);

帖子中的示例不起作用的原因是因为 u 在调用时对 setTimeout 不可用。 setTimeout 事件集调用的代码在 window 对象上调用。

为了使 var 可用，您需要将其存储“升级”，通常是全局范围或包装函数内部(通过 that = this 作为引用 this 变为 window，然后在 setTimeout 中使用 that) 访问它。