javascript在內部函數中保持var

Question

我正在製作一個基於網站的儀表板。其中一項功能是顯示所有客戶的位置。當我將這些放置在地圖上時，我似乎無法獲得彈出權。

function getCoordinates(locationList) { 
      for (var i = 0; i < locationList.length; i++) { 
       if (locationList[i].city != null) { 
        $http.get('https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/' + locationList[i].city + '.json?access_token=' + access_token) 
         .success(
          function (data) { 
           var marker = L.marker([data.features[0].center[1], data.features[0].center[0]]).addTo(mymap); 
           marker.bindPopup(locationList[i].customerName); 
          } 
         ); 
       } 
      } 
     } 

當我使用此代碼的彈出窗口將只在每一個彈出up.does有人上一次客戶的名字知道如何確保使用正確的用戶的屬性？

Answer 1

這是一個關閉問題，要解決它，你必須將你的$ http調用移動到這樣的新函數。

function httpCall(locationList,i){ 
     $http.get('https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/' + locationList[i].city + '.json?access_token=' + access_token) 
         .success(
          function (data) { 
           var marker = L.marker([data.features[0].center[1], data.features[0].center[0]]).addTo(mymap); 
           marker.bindPopup(locationList[i].customerName); 
          } 
     ); 


} 

Answer 2

後for環i總是locationList.length - 1。嘗試添加本地的IIFE。例如，您可以通過替換for迴路來解決問題locationList.forEach

Answer 3

這是一個範圍問題。您的i已更新，稍後當您點擊彈出窗口時，它會讀取最後一個值i。

你應該把你的conditionnal在for內搭在參數i功能：

function getCoordinates(locationList) { 
    for (var i = 0; i < locationList.length; i++) { 
    conditionnalGet(i); 
    } 
    function conditionnalGet(i) { 
    if (locationList[i].city != null) { 
     $http.get('https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/' + locationList[i].city + '.json?access_token=' + access_token) 
     .success(function (data) { 
      var marker = L.marker([data.features[0].center[1], data.features[0].center[0]]).addTo(mymap); 
      marker.bindPopup(locationList[i].customerName); 
     }); 
    } 
    } 
} 

Answer 4

這是臭名昭著的循環問題。由於您只是定義了函數，並沒有在for循環結束時實際執行它，所以所有函數的索引號爲i的值都相同。

解決方案：是將值賦給變量並在成功回調中使用此變量。

for (var i = 0; i < locationList.length; i++) { 
    if (locationList[i].city != null) {  
    var currLocation = locationList[i]; // assign the data to a variable 
    $http.get('https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/' + locationList[i].city + '.json?access_token=' + access_token) 
    .success(
      function (data) { 
       var marker = L.marker([data.features[0].center[1], data.features[0].center[0]]).addTo(mymap); 
       marker.bindPopup(currLocation.customerName); // use the variable instead of the indexed lookup 
      } 
      ); 
    } 
} 

讓我知道這是否有幫助。