javascript - setTimeout 関数内で未定義の JavaScript 変数

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

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それは行いません。

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

Answer 3

これを試して：

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

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

Answer 4

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 ソリューションと大きな違いはありません。実際の関数をリファクタリングするため、はるかにクリーンなため、さらに優れていると思います。:)

Answer 5

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

する必要があります

setTimeout(function() {