7

我有以下代码：

    for (var i = 0; i < markers.length; i++) {

        var lat = markers[i][0];
        var lng = markers[i][1];
        var img = markers[i][2];
        var info = markers[i][3];

        setTimeout(function(lat, lng, img, info) {
            console.log(lat + ', ' + lng);
            $('#map').gmap3({
                action: 'addMarker',
                latLng:[lat, lng],
                options:{
                    animation: google.maps.Animation.DROP,
                    icon: img
                },
                events:{
                    click: function(marker, event, data){
                        $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: '<div id="content" style="width:300px;height:250px;"><img src="' + info + '"></img></div>'}});
                        /*var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                        infowindow.close();*/
                    },
                }
            });
        }, i* 100);
    }

console.log 显示 lat 和 lng 的未定义。为什么是这样？

以前我没有在超时时间内将任何变量传递给函数，它们被定义但它为 for 循环中的每个标记使用了相同的变量，这显然是错误的！

有任何想法吗？

4

5 回答 5

10

lat并且lng是超时函数的命名参数，但setTimeout不会将任何参数传递给该函数，因此它们保持未定义。

您应该将超时设置移动到一个单独的函数中，以便为您的变量建立一个闭包：

function configureTimeout(i, lat, lng, img, info) {
    setTimeout(function() {
        console.log(lat + ', ' + lng);
        $('#map').gmap3({
            action: 'addMarker',
            latLng:[lat, lng],
            options:{
                animation: google.maps.Animation.DROP,
                icon: img
            },
            events:{
                click: function(marker, event, data){
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: '<div id="content" style="width:300px;height:250px;"><img src="' + info + '"></img></div>'}});
                    /*var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                    infowindow.close();*/
                },
            }
        });
    }, i* 100);
}

for (var i = 0; i < markers.length; i++) {

    var lat = markers[i][0];
    var lng = markers[i][1];
    var img = markers[i][2];
    var info = markers[i][3];

    configureTimeout(i, lat, lng, img, info);

}
于 2012-10-18T16:11:16.933 回答
3

试试这个：

setTimeout(function(){myFunc(lat, lng, img, info);},i*100)

function myFunc(lat, lng, img, info) { .... }
于 2012-10-18T16:13:38.660 回答
3

您需要将这些参数传递给匿名函数，setTimeout不会为您执行：

setTimeout(function () { 
    (function(lat, lng, img, info) {
        console.log(lat + ', ' + lng);
        // ... snip ...
    })(lat, lng, img, info);
}, i* 100);
于 2012-10-18T16:16:33.017 回答
1

您需要将您的 setTimeout 封闭在一个闭包中，使用当前参数值自动执行：

for (var i = 0; i < markers.length; i++) {

    var lat = markers[i][0];
    var lng = markers[i][1];
    var img = markers[i][2];
    var info = markers[i][3];
    (function(latitude, longitude, image, infos) { // Attention these must be named differently!
        setTimeout(function() {
            console.log(latitutde + ', ' + longitude); // use the inner param names here and after!
            $('#map').gmap3({ ...omitted... }});
        }, i* 100);
    })(lat, lng, img, info)
}

顺便说一句，与上面的@lanzz 解决方案没有太大区别，我认为它更好，因为它重构了实际功能，更简洁！:)

于 2012-10-18T16:23:11.477 回答
0

setTimeout(function(lat, lng, img, info) {

应该

setTimeout(function() {

于 2012-10-18T16:13:40.737 回答