0

これが私のサンプルコードです

var selected_path = [];

            for (var i = 0; i <path.length-1; i++) {
                    var request = {
                    origin: path[i],
                    destination: path[i+1],
                    travelMode: google.maps.DirectionsTravelMode.WALKING

                }

                directionsService.route(request, function(results, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        selected_path = selected_path.concat(results.routes[0].overview_path);

                    }
                })

            }
            console.log(selected_path);  // slected_path in console is []
            poly.setPath(selected_path);
            poly.setMap(map);

この状況では、コンソールのselected_pa​​thは[]です。console.log（selected_pa​​th）の前にalert（i）行を追加すると。追加後のコードは次のとおりです。

var selected_path = [];

            for (var i = 0; i <path.length-1; i++) {
                    var request = {
                    origin: path[i],
                    destination: path[i+1],
                    travelMode: google.maps.DirectionsTravelMode.WALKING

                }

                directionsService.route(request, function(results, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        selected_path = selected_path.concat(results.routes[0].overview_path);

                    }
                })

            }
            alert(i)   ////// ADDED ONE LINE
            console.log(selected_path); /// selected_path in console has proper value
            poly.setPath(selected_path);
            poly.setMap(map);

変数iは画面にアラートのように表示され、変数selected_pa​​thには適切な値があります。私はそれを理解していないので、誰かが私にそれを説明してもらえますか？明確にするために、Firefoxで機能しますが、おそらくChromeでは機能しません。

4

2 に答える 2

4

directionsService.routeこれは、メソッドの非同期動作によるものだと思います。ajax呼び出しが終了した後、コールバック関数を呼び出します。

したがって、アラートを表示すると、[OK]ボタンをクリックするまで、その後のコード（console.log）の実行が延期されます。これは、ajax呼び出しが終了してselected_path変数を設定するのに十分な時間です。アラートのないバージョンでは、そのような遅延はないため、ajax呼び出しはまだ終了しておらずselected_path、console.logが実行される前にデータを入力できなかった可能性があります。

これを修正するには、次の2つのことができます。

  1. selected_pathコールバック関数にも入力した後に実行したいコードを入れてください。
  2. タイムアウトを開始して、いっぱいになったかどうかを確認し、いっぱいになったときにのみコードを実行します。

したがって、最初の解決策はこれを行うことです。

 directionsService.route(request, function(results, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      selected_path = selected_path.concat(results.routes[0].overview_path);

      alert(i)   ////// ADDED ONE LINE
      console.log(selected_path); /// selected_path in console has proper value
      poly.setPath(selected_path);
      poly.setMap(map);
    }
  })

2番目はこれです：

 directionsService.route(request, function(results, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      selected_path = selected_path.concat(results.routes[0].overview_path);
    }
  })

  (function test() {
    if (selected_path.length > 0) {
      alert(i)   ////// ADDED ONE LINE
      console.log(selected_path); /// selected_path in console has proper value
      poly.setPath(selected_path);
      poly.setMap(map);
    } else {
      setTimeout(test, 200);
    }
  })();

可能であれば、最初のものを使用します。

于 2012-05-20T12:23:40.537 に答える
1

selected_path非同期コールバックを設定しているためです。非同期コールバックを評価するのalert(i)に十分な時間がかかるため、機能します。setTimeout(function(){console.log(selected_path);}, 0)ただし、非同期呼び出しには長い時間がかかる可能性があるため、それに依存することはできません (同様に動作するはずの に依存することもできません)。

解決策は、次のように、動作するselected_pathすべてのコードと、その後に評価する必要があるすべてのコードをコールバックに入れることです。

directionsService.route(request, function(results, status) {
     if (status == google.maps.DirectionsStatus.OK) {
          var selected_path = selected_path.concat(results.routes[0].overview_path);
          poly.setPath(selected_path);
          poly.setMap(map);
          // ...
     }
});
于 2012-05-20T12:25:03.940 に答える