Javascript約束しない約束

私はJavascriptアプリを開発しています。それはやや複雑なアプリケーションの私の最初の試みであり、私は約束の問題にぶち当たっています。Javascript約束しない約束

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Images</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     ... 
    </style> 
    <script src="http://js.pusher.com/2.2/pusher.min.js"></script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap"> 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 

    <script> 
     var map; 

     //setup Pusher API 
     var channel = "channel"; 
     var pusher = new Pusher(appid); 
     var title; 
     var Channel = pusher.subscribe(channel); 

     function getTitle() { 
     return new Promise(function(resolve, reject) { 
      Channel.bind("new-listing", function(listing) { 
       title = listing['title'];  
       resolve(title); 
      }, 0); 
      }); 
     } 

     getTitle().then(function(title) { 
     return title; 
     }); 
     // console.log("Title: " + title); 

     function findCoordinates() { 
      return new Promise(function(resolve, reject) { 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       latitude = results[0].geometry.location.lat(); 
       longitude = results[0].geometry.location.lng(); 

      resolve(latitude, longitude); 
      }, 0); 
      }); 

     } 

     findCoordinates().then(function(latitude, longitude) { 
     console.log("Latitude: " + latitude); 
     console.log("Longitude: " + longitude); 
     }); 
     // console.log("Latitude: " + latitude); 

     function initMap() { 
     var postion = {lat: latitude, lng: longitude}; //here I need latitude and longitude 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: postion 
     }); 

     var marker = new google.maps.Marker({ 
      position: postion, 
      map: map, 
      title: title //here I need title 
     }); 

     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

     } 
    </script> 

    </body> 

</html>

私は3つの問題があります。約束は作業しているが、問題は、私は両方の緯度を持っている必要がありますタイトルは緯度+と同じその約束

外はまだ利用できないことである

をと経度が利用可能
もう1つの問題は、私のコードが、ジオコーダーが約束の中で定義されていないと不平を言うことです。

フィードバックは本当にありがたいです。

出典

2016-08-31 wiwa1978

title' 'の範囲が予想されるとして、1（あります'latitude'と' longitude'に反対します）、実際の問題はコールバックの非同期です。 – Bergi

私は同様の質問の答えを読んで、より具体的に私の質問に適応しました。答えを読んだ後でさえ、私はそれを見ないと認めなければなりません。 – wiwa1978

'setTimeout'は' Channel.bind'に似ていて、 'Test message''は' listing ['title'] 'と似ています。その約束と座標の約束をもって、 'Promise.all'を使い、すべてのデータが到着したら' initMap'を呼び出すことができます。 – Bergi

問題は、タイトルはまだそれがなることはありませんその約束

外で利用できないことです。これにより、初期化される前にアクセスできるようになるので、タイトルのグローバル変数を持たないため、グローバルな約束ができます。
約束の上でthenと呼ぶことでタイトルにアクセスできます。値が到着するのを待つ必要があります。緯度+と同じ

Iは、利用可能な緯度と経度
ここ

同じ両方を有する必要があります。 2つの引数を指定してresolveを呼び出すことはできません。代わりにオブジェクトを渡す必要があります。

もう1つの問題は、私のコードが、ジオコーダーが約束の中で定義されていないと不平を言うことです。

変更されていない可能性があります。場合によっては、ジオコーダー・スクリプトがロードされるまでfindCoordinatesを呼び出すのを待つ必要があります。

あなたのコードのほとんどは、すでによさそうだ、今はただの変数で約束を保管しなければならない、とinitMap機能でそれらを待つ：

function getTitle(channel) { 
    return new Promise(function(resolve, reject) { 
    channel.bind("new-listing", resolve); 
    }).then(function(listing) { 
    return listing['title']; 
    }); 
} 

function findCoordinates(address) { 
    return new Promise(function(resolve, reject) { 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     // if (status not ok) return reject(status); 
     resolve(results); 
    }, 0); 
    }).then(function(results) { 
    var latitude = results[0].geometry.location.lat(); 
    var longitude = results[0].geometry.location.lng(); 
    console.log("Latitude: " + latitude); 
    console.log("Longitude: " + longitude); 
    return {lat: latitude, lng: longitude}); 
    }); 
} 

//setup Pusher API 
var pusher = new Pusher(appid); 
var channel = pusher.subscribe("channel"); 

var titlePromise = getTitle(channel); 
var coordinatesPromise = findCoordinates(…); // dunno where you got the address from 

// called by the google maps script when ready 
function initMap() { 
    Promise.all([titlePromise, coordinatesPromise]).then(function(res) { 
    var title = res[0]; 
    var position = res[1]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: position 
    }); 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: title 
    }); 

    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
    }); 
}

出典

2016-08-31 22:13:35 Bergi

downvoteの理由を聞いて不思議です。 – Bergi

私から来ていない、私はちょうどupvoted。あなたの提案を試して、報告して戻します。 – wiwa1978

答えて

関連する問題