分配給對象後，變量仍然爲空

Question

我目前正在爲Google Map API GeoCoding構建一個簡單的示例應用程序，並且偶然發現了javascript問題。

geocodeRequest方法應該將其結果值賦給變量this.tempResult。 但是，當我嘗試在Listener中打印它時，varriable爲null。

輸出到控制檯：

• 監聽器：空
• geoCodeRequest：對象

順序輸出的打印方式似乎暗示了在監聽器代碼的geoCodeRequest前衝在最前面方法設法分配this.tempResult變量。

有沒有解決方案呢？

$JSKK.Class.create 
(
    { 
     $namespace  :'application', 
     $name   :'GeoCoder' 
    } 
) 
(
    { 
    }, 
    { 
     service :null, 
     main :null, 
     geoCodeInput: null, 
     geoCodeButton: null, 
     reverseGeoCodeButton: null, 
     reverseGeoCodeActive: null, 
     callback :null, 
     reverseCallback:null, 
     tempResult: null, 


     init: function(main, callback, reverseCallback) 
     { 
      this.main = main; 
      this.callback = callback; 
      this.reverseCallback = reverseCallback; 

      this.service = new google.maps.Geocoder(); 

      this.geoCodeInput = $('#toolPannel div[data-resource=locator] input[data-action=input]'); 
      this.geoCodeButton = $('#toolPannel div[data-resource=locator] input[data-action=geocode]'); 

      this.reverseGeoCodeButton = $('#toolPannel div[data-resource=locator] input[data-action=reversegeocode]'); 
      this.reverseGeoCodeActive = false; 

      this.createListener(); 
     }, 


     geoCodeRequest: function(request) 
     { 
      this.service.geocode 
      (
       request, 
       function (result,status) 
       { 
        //console.debug(arguments); 
        if (status== google.maps.GeocoderStatus.OK) 
        { 
         this.tempResult = result[0]; 
         console.debug(this.tempResult); 
        } 
        else 
        { 
         alert ('GeoCoder request failed!'); 
        } 
       }.bind(this) 
      ); 
     }, 

     createListener: function() 
     { 
      this.geoCodeButton.click(function() 
       { 
        this.geoCodeRequest 
        (
         { 
          address: this.geoCodeInput.val() 
         } 
        ); 
        this.callback(this.tempResult); 
       }.bind(this) //Bind here 
      ); 

      this.reverseGeoCodeButton.click(function() 
       { 
        if (!this.reverseGeoCodeActive) 
        { 
         this.main.map.setOptions({draggableCursor:'crosshair'}); 
         this.reverseGeoCodeActive=true; 
        } 
        else if(this.reverseGeoCodeActive) 
        { 
         this.main.map.setOptions({draggableCursor:'hand'}); 
         this.reverseGeoCodeActive=false; 
        } 
       }.bind(this) 
      ); 

      google.maps.event.addListener 
      (
       this.main.map, 
       'click', 
       function (event) 
       { 
        if (this.reverseGeoCodeActive) 
        { 
         this.geoCodeRequest 
         (
          { 
           location: event.latLng 
          } 
         ); 
         console.debug(this.tempResult); 
         this.reverseCallback(this.tempResult); 
        } 
       }.bind(this) 
      ); 
     } 
    } 
); 

Answer 1

問題是這樣的代碼：

geoCodeRequest: function(request) { 
    this.service.geocode(request, function(result, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      this.tempResult = result[0]; 
      console.debug(this.tempResult); 
     } else { 
      alert('GeoCoder request failed!'); 
     } 
    }.bind(this)); 
}, 

this.geoCodeButton.click(function() { 
    this.geoCodeRequest({ 
     address: this.geoCodeInput.val() 
    }); 
    this.callback(this.tempResult); 
}.bind(this)); 

（。很抱歉，但我花了重新格式化，所以我可以按照邏輯更好的自由隨意轉換回自己的風格）

在地理編碼結果從服務器返回之前，您正嘗試呼叫this.callback()。這是行不通的。您需要處理地理編碼器使用的回調中的地理編碼結果。

您已經在geoCodeRequest()方法中爲地理編碼器提供回調，因此您可以將回調添加到您的點擊處理程序，並從geoCodeRequest()中的回調中調用該回調。你可以這樣做：

geoCodeRequest: function(request) { 
    this.service.geocode(request, function(result, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      request.success(result[0]); 
     } else { 
      request.failure(status); 
     } 
    }.bind(this)); 
}, 

this.geoCodeButton.click(function() { 
    this.geoCodeRequest({ 
     address: this.geoCodeInput.val(), 
     success: function(result) { 
      console.debug(result); 
      this.callback(result); 
     }, 
     failure: function(status) { 
      alert('GeoCoder request failed!'); 
     } 
    }); 
}.bind(this)); 

請注意，我還添加了一個失敗回調來處理錯誤情況。

reverseGeoCodeButton.click()處理程序具有相同的問題，可以用相同的解決方案修復。

這是接近你原來的方法，但我不知道代碼是否可以簡化。你需要這些多層次的代碼嗎？在任何情況下，無論您在處理異步結果（例如地理編碼器爲您提供的內容），您都必須在適當的回調內部而不是在地理編碼器（或任何異步函數）返回後處理它。