從函數返回的數據是未定義的

Question

我有從ajax返回數據到調用函數的問題。當我console.logging它沒有定義。

我相信我的問題發生是因爲js是異步的，而當我是console.logging數據時，它還沒有準備好。我能做些什麼來解決它？

FooFunction: function(userInput){ 

    var fooData = FooFunction2(userInput); 
    console.log(fooData);  // <--- undefined 
}, 

FooFunction2: function(userInput) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      return manipulatedData; 
     } 
    }); 
}, 

Answer 1

Ajax調用是異步的，所以返回時，將無法正常工作。將代碼更改爲使用在ajax調用完成時調用的回調。

我改變了你的代碼，這樣做：

FooFunction: function(userInput){ 
    var callbackfunc = function(ajaxData) 
    { 
     console.log(ajaxData); //ajax is complete! 
    }; 

    this.FooFunction2(userInput, callbackfunc); 
}, 

FooFunction2: function(userInput, callbackfunc) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      callbackfunc(manipulatedData); 
     } 
    }); 
}, 

Answer 2

FooFunction2是對象的屬性中使用this.FooFunction2

，你不能從異步方法返回。要麼使ajax呼叫同步或proivde回調。

FooFunction: function(userInput){ 

    var fooData = this.FooFunction2(userInput); 
    console.log(fooData);  // <--- undefined 
}, 

修改代碼

FooFunction: function(userInput){ 

    this.FooFunction2(userInput, function(fooData){ 
      console.log(fooData);  // <--- undefined 
    }); 

}, 

FooFunction2: function(userInput, cb) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      cb(manipulatedData); 
     } 
    }); 
},