variabili JavaScript undefined all'interno della funzione setTimeout

Question

Ho il seguente codice:

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

Il console.log sta mostrando non definito per lat e lng. Perchè è questo?

In precedenza non ho passato nessuna variabile nella funzione entro il timeout e sono stati definiti ma ha utilizzato lo stesso per ciascun marker nel ciclo for che era ovviamente sbagliato!

Qualche idea?

Answer 1

lat e lng sono denominati parametri della funzione di timeout, ma setTimeout non passa alcun parametro a tale funzione, pertanto rimangono indefiniti.

si dovrebbe spostare l'impostazione di timeout in una funzione separata, al fine di stabilire una chiusura per le variabili:

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

provare questo:

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

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

Answer 3

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

dovrebbe essere

setTimeout(function() {

Answer 4

è necessario passare i parametri alla funzione anonima, setTimeout non lo farà per voi:

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

Answer 5

È necessario allegare il setTimeout in una chiusura, self-executing con i valori params corrente:

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

A proposito, non c'è molta differenza con la soluzione di @lanzz sopra, che ritengo sia ancora migliore dato che raffigura la funzione reale, che è molto più pulita! :)