Javascript Jquery，每2秒添加一次元素

我正在尝试创建一个类似于的增长图

我正在用它做地图

到目前为止，我得到的是一个按钮，当我点击它时，我想开始动画。onclick代码是：

<script>
    $("input.buttonB").click(function(){  
        window.setTimeout(function() {
            $('#map_canvas').gMap('addMarker', {
                latitude:   41.60252,
                longitude: -100.32855,
                content: 'Some HTML content'
                }
            );
        }, 2000);
        window.setTimeout(function() {
            $('#map_canvas').gMap('addMarker', {
                latitude:   11.60252,
                longitude: -110.32855,
                content: 'Some HTML content'
                }
            );
        }, 2000);        
    });
</script>

$（“input.buttonB”）。单击（函数（）{
setTimeout（函数（）{
$（'map#u canvas'）.gMap（'addMarker'{
纬度：41.60252，
经度：-100.32855，
内容：“一些HTML内容”
}
);
}, 2000);
setTimeout（函数（）{
$（'map#u canvas'）.gMap（'addMarker'{
纬度：11.60252，
经度：-110.32855，
内容：“一些HTML内容”
}
);
}, 2000);        
});

问题是，标记不会每2秒出现在屏幕上。窗口等待4秒钟，然后同时显示这两个窗口

---

有什么建议吗？

理想情况下，您应该有这样的建议（未经测试）：

Javascript不会“停止”并等待超时。因此，如果您设置两个2秒超时，它们都将在2秒后执行

为什么你的代码应该在4秒后执行，我不能说。没有任何迹象表明它会。但是，如果计算机忙，超时可能会延迟。超时仅意味着在时间限制到期后，将尽快发生某些事情

无论如何，我建议如下：

(function(){
    var markers = [
        {
            latitude:   41.60252,
            longitude: -100.32855,
            content: 'Some HTML content'
        },
        {
            latitude:   11.60252,
            longitude: -110.32855,
            content: 'Some HTML content'
        }
        // add more here
    ];

    function addMarker() {
        $('#map_canvas').gMap('addMarker', markers.shift());

        if( markers.length > 0 ) {
            setTimeout(addMarker, 2000);
        }
    }

    $("input.buttonB").click(function(){
        addMarker();
    });
}());

示例HTML

<button>click</button>
<div class="output"></div>

点击

JS

$(function(){
    var coords = [
        {x:100, y:200},
        {x:5, y:10},
        {x:300, y:400}
    ];

    var i = 0;

    var displayCoord = function(){
       $("div").append('<p> x:' + coords[i].x + ' y:' + coords[i].y + '</p>');
        if(i < coords.length){
            i += 1;
            setTimeout(displayCoord, 2000);
        }
    };

    $("button").click(displayCoord);
});

$（函数（）{
变量坐标=[
{x:100，y:200}，
{x:5，y:10}，
{x:300，y:400}
];
var i=0；
var displayCoord=函数（）{
$（“div”）.append（'x:'+coords[i].x+'y:'+coords[i].y+'
'）；
如果（i<坐标长度）{
i+=1；
设置超时（displayCoord，2000）；
}
};
$（“按钮”）。单击（displayCoord）；
});

---

看起来两个事件都会在2秒后发生（不是4秒-您是否使用了FireBug之类的调试器，这会使它看起来更慢？）。我认为您希望第一个匿名函数设置第二个的计时器。

在您的示例中，您不希望第二个超时为4000毫秒吗？为什么有两个超时？最终将有数百个元素，每2秒显示一次组。因为我误解了超时，所以有两次超时。太好了！我看到shift（）的值；，以前在jQuery中不知道它。@Michael Mao-这是一个简单的老JavaScript，它实际上从数组中删除了第一个元素，但当您不需要重复使用数组时，它会很有用，因为使用

shift

的解决方案往往比较短。我喜欢这个解决方案。我对它进行了测试，效果良好。但有一个问题——循环永远不会结束。太棒了。我更新了答案，以反映我所测试的内容，并使其有效。非常感谢。

$(function(){
    var coords = [
        {x:100, y:200},
        {x:5, y:10},
        {x:300, y:400}
    ];

    var i = 0;

    var displayCoord = function(){
       $("div").append('<p> x:' + coords[i].x + ' y:' + coords[i].y + '</p>');
        if(i < coords.length){
            i += 1;
            setTimeout(displayCoord, 2000);
        }
    };

    $("button").click(displayCoord);
});