Javascript承諾沒有幫助

我正在開發一個Javascript應用程序。這是我第一次嘗試一個更復雜的應用程序，我遇到了Promises的問題。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>

我有三個問題：

雖然承諾在工作，問題是，標題仍然沒有可用的承諾外
同緯度+我需要有兩個緯度和經度
另一個問題是，我的代碼現在抱怨地理編碼器沒有在promise中定義。

任何反饋真的很感激。

來源

2016-08-31 wiwa1978

title'的'範圍是所預期的（如與「緯度」和「經度」相反），但是你的實際問題是回調的不同步。 – Bergi

我讀了類似問題的答案，並將我的問題修改得更加具體。不得不承認，即使在閱讀答案後，我也沒有看到它。 – wiwa1978

'setTimeout'就像'Channel.bind'，''Test message''就像'listing ['title']'。有了這個承諾，並且承諾了座標，您可以使用'Promise.all'，然後在所有數據到達後調用您的'initMap'。 – Bergi

的問題是，標題是還沒有上市的諾言

它永遠不會被外界。這可能允許你在初始化之前訪問它，所以你不會有一個標題的全局變量 - 你有一個全球承諾。
您可以通過致電then來獲取標題，這可能不需要等待值的到來。

同緯度+我需要有經度和緯度提供

同樣在這裏。請注意，您不能使用兩個參數調用resolve，您必須改爲傳遞一個對象。

另一個問題是，我的代碼現在抱怨geocoder沒有在promise中定義。

不太可能發生了變化。也許你需要等待，直到地址解析器腳本已經加載，然後調用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

Javascript承諾沒有幫助

回答

相關問題