2012-10-18 169 views
3

我有一個基本的函數,我試圖從bit.ly返回一個縮短的url。我的用戶名和api_key剛剛被刪除了這篇文章,但他們已經過測試,我得到了他們的正確答案。我們也檢查過了,我們正在用正確的數據創建JSON響應。bitly函數返回undefined

我遇到的問題是我想要這個功能是我們可以在網站上的不同點上調用以縮短將包含在Tweet部分中的鏈接。所以這個想法只是編寫一個我們可以及時調用的函數,因爲我們明確知道某些東西會被推出,並且需要動態調用頁面的url。

當url傳遞給函數時,我們得到未定義的返回值。這裏的功能:

var UrltoShorten = 'http://google.com', 
     bitly = shortenUrl(UrltoShorten); 

    function shortenUrl(longUrl) { 

     var username = 'removed', 
      key = 'removed'; 

     $.ajax({ 
      url: 'http://api.bit.ly/v3/shorten', 
      data: { 
       longUrl: longUrl, 
       apiKey: key, 
       login: username 
      }, 
      dataType: 'jsonp', 
      success: function (v) { 
       var shortUrl = v.data.url; 
       return shortUrl; 
       //console.log(shortUrl); // Will return shorten Url 
      } 
     }); 
    } 

console.log(bitly); // Returns undefined 

在我們的測試中,我們已經發現,console.logging成功函數內的值返回每次縮短的URL。 Console.logging shortenUrl函數外部的值每次都返回undefined。

是否有一個原因,我們無法獲得正確的值的功能?

+5

AJAX是異步的。 – jbabey

+0

您將最終在函數外部獲得正確的值,但只有在HTTP請求完成並調用了「成功」函數之後才能獲得正確的值。 – Pointy

回答

4

ajax調用是異步的,這意味着程序不會像您期望的那樣逐行進行。 ajax調用之外的JavaScript將繼續運行,然後當ajax調用在後臺完成時,控件將跳轉回成功/錯誤回調。

簡短回答:任何你想處理ajax調用的數據都必須在該調用的成功處理程序中。

如果出於某種原因想要停止一切,直到ajax調用完成,然後通過ajax選項async: false。這會凍結瀏覽器,直到ajax調用完成。使用

+0

只是爲了測試我設置異步:假,它仍然返回未定義。 – erik

2

集AJAX SYNCHRON:

$.ajax({ 
    async:false, 
    ... 
})