JQueryとGoogle Maps API

Question

私は以下のコードを持っています。 http://pastebin.com/Wf598D2E

しかし、最初のクリックで距離値を#resultにすることはできません。 #resultで距離を表示するには、2回クリックする必要があります。このコードの問題は何ですか？

Answer 1

理由は、GoogleのAPIへの呼び出しは非同期で、

calcRouteすなわち「distの」の値を移入呼び出しが戻るが、その時間 あなたdoc.ready法により を返すために500ミリ秒を取る前に、あなたのコードが実行されるということですその呼び出しが既に実行された後。

あなたが二回目は、あなたが見る価値が

を修正するために最初calcRoute呼び出しの結果であることである値を参照してください理由：

、単純な1行の改正

$(document).ready(function(){ 
      $("#send").click(function(event){ 
        calcRoute(); 
      }); 

    }); 

    function calcRoute() { 
     var start = document.getElementById("from").value; 
     var end = document.getElementById("to").value; 
     var ret = 0; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function(result, status) { 
      //this is the onComplete method so do your UI amendments from in here 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(result); 
       dist = result.routes[0].legs[0].distance.value; 
       $("#result").html(dist); 
      }else{ 
        alert("Error"); 
      } 
     }); 

    }