zmienne JavaScript niezdefiniowane wewnątrz funkcji setTimeout

Question

Mam następujący kod:

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 jest pokazujący niezdefiniowana dla lat i LNG. Dlaczego to?

Wcześniej nie przechodzą wszystkie zmienne do funkcji w obrębie limitu czasu i zostały one zdefiniowane, ale jest stosowany ten sam jeden dla każdego znacznika w pętli, która to oczywiście tak!

Wszelkie pomysły?

Answer 1

lat i lng są nazwane parametry swojej funkcji limitu czasu, ale setTimeout nie przechodzi wszelkie parametry do tej funkcji, więc pozostaje niezdefiniowana.

Należy przenieść ustawienia limitu czasu na oddzielnej funkcji, w celu ustanowienia zamknięcie dla zmiennych:

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

Spróbuj tego:

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

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

Answer 3

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

powinny być

setTimeout(function() {

Answer 4

Trzeba przekazać te parametry do funkcji anonimowej, setTimeout nie zrobi to za ciebie:

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

Answer 5

Trzeba załączyć setTimeout w zamknięciu, samodzielne wykonywanie obowiązujących wartości 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) 
} 

Nawiasem mówiąc, nie ma zbyt dużej różnicy w porównaniu z powyższym rozwiązaniem @lanzz, co moim zdaniem jest jeszcze lepsze, ponieważ odreagowuje rzeczywistą funkcję, która jest o wiele czystsza! :)