錯誤的功能設置爲可變

Question

我有這樣的功能：

function getImage(query){ 
    var serach_title = query.replace(/\ /g, '+'); 
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title; 
    $.ajax({ 
     url: imgUrl, 
     cache: false, 
     dataType:'jsonp', 
     success: function(data) { 
      var image = data.responseData.results[0].unescapedUrl; 
      console.log(image); 
      return image; 
     } 
    }); 
} 

，當我這個功能設置爲veraible像這樣：

var image = getImage(title); 

的var image回來與undefined。但console.log(image);正確地記錄了URL。

我該如何解決這個問題？

Answer 1

您的函數getImage無效。它立即返回結果，但ajax請求是異步的。所以，你應該使用回調函數，當請求被執行時會被調用。

function getImage(query, callback) { 
    var serach_title = query.replace(/\ /g, '+'); 
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title; 
    $.ajax(
     url: imgUrl, 
     cache: false, 
     dataType:'jsonp', 
     success: function(data) { 
      var img = data.responseData.results[0].unescapedUrl; 
      if (callback) { 
       callback(img); 
      } 
    }); 
} 

// here you should show progress... 
var image; 
getImage(query, function(img) { 
    image= img; 
}); 

另一種方法是使用jQuery推遲對象，以獲取來自Ajax請求的結果是：

function getImage(query) { 
    var serach_title = query.replace(/\ /g, '+'); 
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title; 
    return $.get(imgUrl, null, 'jsonp'); 
} 

// here you should show progress... 
var image; 
getImage(query).done(function(data) { 
    image = data.responseData.results[0].unescapedUrl; 
}); 

Answer 2

把你返回到AJAX功能：在這裏

function getImage(query){ 
    var serach_title = query.replace(/\ /g, '+'); 
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title; 
    $.ajax({ 
     url: imgUrl, 
     cache: false, 
     dataType:'jsonp', 
     success: function(data) { 
      return data.responseData.results[0].unescapedUrl; 
     } 
    }); 
} 

Answer 3

Ajax調用是異步，所以你可以用這樣的js回調來解決這個問題：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 

// function 
function getImage(query, callback){ 
    var serach_title = query.replace(/\ /g, '+'); 
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title; 
    $.ajax({ 
     url: imgUrl, 
     cache: false, 
     dataType:'jsonp', 
     success: function(data) { 
      callback({ 
       image: data.responseData.results[0].unescapedUrl 
      }); 
     } 
    }); 
} 

// usage 
getImage('apple', function(e) 
{ 
    // after request is made to google and you have a result 
    console.log(e.image); 
}) 

</script> 

我的控制檯輸出：

Answer 4

要異步獲取圖像。這可以簡單地通過使ajax調用爲同步來完成。

$.ajax({ 
    url: imgUrl, 
    async: false, 
    cache: false, 
    dataType:'jsonp', 
    success: function(data) { 
     var image = data.responseData.results[0].unescapedUrl; 
     console.log(image); 
     return image; 
    } 
});