jQuery，每2秒添加元素

Question

我正在尝试创建一个类似于http://projects.flowingdata.com/walmart/的增长地图。

我正在使用https://github.com/marioestrada/jQuery-gMap进行地图绘制。

到目前为止，我已经得到了一个按钮，当我点击它时，我希望开始动画。 点击事件的代码如下：

<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>

问题是，标记不会每隔两秒钟就出现在屏幕上。该窗口将等待4秒钟，然后同时显示它们。您有什么建议吗？

- Ted

---

在你的例子中，你不想让第二个 timeOut 是 4000 毫秒吗？ - citizen conn

你为什么有两个超时时间？ - Starx

最终将有几百个元素，每隔2秒显示一次组。由于我误解了超时，所以有两个超时。 - Ted

Answer 1

理想情况下，您应该有类似于以下内容的代码（未经测试）：

var markerData = [{
    lat: "something",
    lng: "something",
    html: "something"},
{
    lat: "something",
    lng: "something",
    html: "something"
}];

function showNextMarker() {
    var current = markerData.shift();
    $('#map_canvas').gMap('addMarker', {
        latitude: current.lat,
        longitude: current.lng,
        content: current.html
    });
}

$("input.buttonB").click(function(){  
    var i = window.setInterval(function() {
        showNextMarker();
        if (markerData.length == 0) {
            i = window.clearInterval(i);
        };
    }, 2000);    
});

- karim79

---

太好了！我看到了shift()的价值，在jQuery之前不知道它。 - Michael Mao

@Michael Mao - 这是普通的JavaScript，而它的陷阱在于它实际上会从数组中删除第一个元素，但当你不需要重复使用数组时，它可能很有用，因为利用shift的解决方案往往更短。 - karim79

我喜欢这个解决方案。我测试过了，它可以工作。不过有一个问题——循环永远不会结束。 - Ted

太棒了。我更新了答案以反映我已经测试并且可行的内容。谢谢！ - Ted

Answer 2

看起来你想让两个事件在 2 秒后发生（而不是 4 秒 - 你是否使用像 FireBug 这样的调试器使它看起来更慢？）。我认为你希望第一个匿名函数设置第二个计时器。

- Aaron D. Marasco

Answer 3

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();
    });
}());

- Flambino

Answer 4

示例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);
});

在 jsFiddle 上查看

- maček