javascript - 位函数返回未定义

Question

我有一个基本函数，我试图从 bit.ly 返回一个缩短的 url。我的用户名和 api_key 刚刚从这篇文章中删除，但它们已经过测试，我得到了正确的回复。我们还进行了检查，我们收到了包含正确数据的 JSON 响应。

我遇到的问题是我希望这个函数是我们可以在网站上的不同点调用的东西，以缩短将包含在推文的一部分中的链接。所以我们的想法只是编写一个我们可以及时调用的函数，因为我们特别知道推特上会发什么东西，需要动态调用页面的 url。

当 url 传递给函数时，我们将 undefined 作为返回值。这里的功能:

    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 。

有什么原因导致我们无法在函数之外获得正确的值吗？

Answer 1

ajax 调用是异步的，这意味着程序不会像您期望的那样逐行执行。 ajax 调用之外的 javascript 将继续运行，然后当 ajax 调用在后台完成时，控件将跳回到成功/错误回调。

简短回答:任何您想对来自 ajax 调用的数据执行的操作都必须在该调用的成功处理程序中。

如果出于某种原因，你想暂停一切，直到 ajax 调用完成，然后向 ajax 传递选项 async: false。这将卡住浏览器，直到 ajax 调用完成。