Question

我正在尝试制作类似于http://projects.flowingdata.com/walmart/的增长地图。

我正在使用https://github.com/marioestrada/jQuery-gMap来制作maping

到目前为止我得到的是一个按钮，当我点击它时，我想开始动画。 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>

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

有什么建议吗？

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

Answer 2

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

Answer 3

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

See it on jsFiddle

Answer 4

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

Jquery，每2秒添加一次元素

4 个答案: