Question

我有一个全局功能，我已设置并测试以确保它正常工作：

function shortenUrl(url) { 
   ...
}

然后我试图在另一个函数中调用该函数，如下所示：

var pageLink = $(location).attr('href'),
    shortLink = shortenUrl(pageLink);

所以当我尝试运行它时，我得到一个未定义的错误。但是，如果我将pageLink变量从使用jQuery查找页面url更改为硬编码的内容（如“http://example.com”和console.log），则全局函数中的值将返回缩短的链接。

我只是在评论这样的回复电话：

//return shortUrl;
console.log(shortUrl);

这在控制台中给了我正确的值。但它没有返回到我的shortLink变量，因为它仍然显示为未定义。我错过了一些简单的东西吗？为什么值不返回shortLink变量？为什么用jQuery动态创建的链接会通过该函数？

更新编辑：

好的重置一下。我认为问题在于shortenUrl函数或者我如何将值传递给它。只是为了测试我做的这个功能：

    function shortenUrl(url) {

        var url = url,
            username = 'username',
            key = 'api key';

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

var shorten = shortenUrl('http://google.com');
console.log(shorten);

Console.log（缩短）返回undefined。但是，如果我取消注释console.log（shortUrl）;返回shortUrl;在函数中我得到了一个正确缩短从bit.ly返回的URL。

为什么我不能在console.log（缩短）中返回正确的缩短网址？变量是否传递错误？

Answer 1

你的shortenUrl函数应该有一个返回网址，它会返回缩短的网址，如下所示：

function shortenUrl(url) {
   var shortUrl = url; // for the sake of simplicity
   return shortUrl;
}

我很好奇，如果我的提示没问题，请让我们都知道。

<强>更新：

$(window).load(function(){
function shortenUrl(url) {

    var url = url,
        username = 'bit.ly username',
        key = 'api Key';

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

function some() {
    var pageLink = $(location).attr('href'),
        shortenLink = shortenUrl(pageLink);

    var link = $('<a href="' + shortenLink + '">Shorten Link</a>');
    link.prependTo('element');
}
});

由于缺少密钥和用户名，我无法尝试代码，但这应该可行。确保用正确的代码替换它们并且调用代码，如下所示：

some();

始终在浏览器的控制台上查看错误/警告！

Answer 2

说实话，我对jsonp没有太多经验，但是ajax调用应该返回promise。如果shortenUrl函数返回了该承诺，那么在调用者中，您可以使用done，如下所示：

    function shortenUrl(url) {

        var url = url,
            username = 'bit.ly username',
            key = 'api Key';

        return $.ajax({
            url: 'http://api.bit.ly/v3/shorten',
            data: {
                longUrl: url,
                apiKey: key,
                login: username
            },
            dataType: 'jsonp'
        });
    }

    function modifyDom(v) {
        var shortUrl = v.data.url,
            link = $('<a href="' + shortenLink '">Shorten Link</a>');
        link.prependTo('element');
    }    

    $( function() {
        var pageLink = $(location).attr('href');
        shortenUrl(pageLink)
            .done( modifyDom },
    } );

虽然这段代码没有经过测试，但我希望你能得到这个想法。

在变量中使用函数

2 个答案: