Question

我有以下代码：

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

对于lat和lng，console.log显示未定义。这是为什么？

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

有什么想法吗？

Answer 1

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

}

Answer 2

试试这个：

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

function myFunc(lat, lng, img, info) { .... }

Answer 3

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

setTimeout(function () { 
    (function(lat, lng, img, info) {
        console.log(lat + ', ' + lng);
        // ... snip ...
    })(lat, lng, img, info);
}, i* 100);

Answer 4

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

应该是

setTimeout(function() {

Answer 5

您需要将setTimeout括在一个闭包中，并使用当前的params值自行执行：

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解决方案没什么区别，我认为它更好，因为它重构了实际的功能，这更加清晰！：）

在setTimeout函数中未定义JavaScript变量

5 个答案: