使用setTimeOut在3秒后逐个显示标记.为什么它只显示最后一个标记

Display markers one by one after 3 seconds using setTimeOut.. Why it shows only the last marker?

本文关键字：显示 为什么 最后一个 setTimeOut 3秒 使用      更新时间：2023-09-26

我试图使用setTimeOut逐个显示标记，但它不起作用。下面是我的代码:

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

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

arrayOfMarkersObj[u].setVisible(true);

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

为什么会这样?

将键存储到数组中(如果您仅使用支持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)来访问它。

在JavaScript中，内部作用域中的变量的值与定义该变量的作用域绑定。这意味着当执行回调时，将从定义u的作用域(即showOneByOne())中检索u的值。因此，每次回调执行时，u将等于arrayOfMarkersObj.length -1 (for循环后的最终值)。

一个简单的解决方法应该是使用forEach，即使不清楚是否需要为每个元素使用不同的回调/计时器。您不妨按照Ken - Abdias Software的回答建议使用一个。

相关文章：