Ajaxがループ内でグローバル変数を設定する

Question

関数からグローバル変数を設定し、ajaxを呼び出して距離を取得したい。 nearestIndex変数は常に未定義です。

私が得た最初の解決策は、asyncを使用することでした：false - これは私のPCブラウザでは動作しますが、このプロジェクトはアンドロイドへのwebserviceであり、この解決策はwebviewでは機能しません。

もちろん、async：falseはおすすめしません。私の場合はこの例が必要ですが、スタックオーバーフローでこの問題を探していましたが、私はいつもコールバックについて理解できませんでした。

var allDestination = ["A", "B", "C"]; 
 
var nearestIndex; 
 

 
function getNearest(){ 
 
\t var from = myPosition.getLatLng().lat + "," + myPosition.getLatLng().lng; 
 
\t var tempDistance; 
 
\t for(var i=0; i<allDestination.length; i++){ 
 
\t \t var destination = allDestination[i].getLatLng().lat + "," + allDestination[i].getLatLng().lng; 
 
\t \t $.ajax({ 
 
      type: "GET", 
 
      url: "http://localhost:8989/route?point=" + from + "&point=" + destination + "&points_encoded=false&instructions=false", 
 
      dataType: 'json', 
 
      contentType: "application/json", 
 
      success: function (data) { 
 
      \t var distance = data.distance; 
 
      \t if(i == 0){ 
 
      \t \t tempDistance = distance; 
 
      \t \t nearestIndex = i; 
 
      \t } else { 
 
      \t \t if(distance < tempDistance){ 
 
      \t \t \t tempDistance = distance; 
 
      \t \t \t nearestIndex = i; 
 
      \t \t } 
 
      \t } 
 
      } 
 
     }); 
 
\t } 
 
} 
 

 
function onMapClick(e) { 
 
\t myPosition.setLatLng(e.latlng);   
 
\t myPosition.addTo(map); 
 
\t getNearest(); 
 
\t allDestination[nearestIndex].addTo(map); 
 
}

Answer 1

あなたは非同期呼び出しを扱っていると、あなたの関連するコードは次のようAJAX呼び出しのsuccessハンドラから呼び出さなければならない：

var allDestination = ["A", "B", "C"]; 
var nearestIndex; 
var tempDistance; 
var successReceived = 0; //counter to keep watch on ajax success callback 

//modify the function signature to receive index as well as callback function 
function getNearest(index, callbackFunction) { 
    var from = myPosition.getLatLng().lat + "," + myPosition.getLatLng().lng; 

    var destination = allDestination[index].getLatLng().lat + "," + allDestination[index].getLatLng().lng; 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8989/route?point=" + from + "&point=" + destination + "&points_encoded=false&instructions=false", 
     dataType: 'json', 
     contentType: "application/json", 
     success: function(data) { 
      successReceived++; //increment the success counter 
     var distance = data.distance; 
     if (index == 0) { 
      tempDistance = distance; 
      nearestIndex = index; 
     } else { 
      if (distance < tempDistance) { 
      tempDistance = distance; 
      nearestIndex = index; 
      } 
     } 

     //check if we got all the ajax response back. If yes then call the callback function 
     if(successReceived == allDestination.length && typeof callbackFunction == 'function') 
     { 
      callbackFunction(); 
     } 
     } 
    }); 

} 

function onMapClick(e) { 
    myPosition.setLatLng(e.latlng); 
    myPosition.addTo(map); 

    for (var i = 0; i < allDestination.length; i++) { 
     //pass the current index and callback function 
     getNearest(i,function(){ 
      allDestination[nearestIndex].addTo(map); 
     }); 
    } 

} 

Answer 2

asincrounous関数は何も返さカントので、私は今まであなた、 それのように同じ問題を持っています。 だから、私はあなたにallDestination [nearstIndex] .addTo（map）を注入すると思います。 Ajaxの成功への

if(i == 0){ 
       tempDistance = distance; 
       allDestination[i].addTo(map); 
      } else { 
       if(distance < tempDistance){ 
        tempDistance = distance; 
        allDestination[i].addTo(map); 
       } 
      } 

か、AJAXの成功を処理するための関数を作成し,,, CMIIW