3

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

私たちのテストでは、success 関数内の値を console.logging すると、毎回短縮 URL が返されることがわかりました。shortUrl 関数の外で値を Console.logging すると、毎回 undefined が返されます。

関数の外で正しい値を取得できない理由はありますか?

4

2 に答える 2

4

ajax 呼び出しは非同期です。つまり、プログラムは期待どおりに行ごとに流れません。ajax 呼び出しの外側の JavaScript は引き続き実行され、ajax 呼び出しがバックグラウンドで終了すると、コントロールは成功/エラー コールバックに戻ります。

簡単な答え: ajax 呼び出しからのデータでやりたいことは、その呼び出しの成功ハンドラーにある必要があります。

何らかの理由で、ajax 呼び出しが終了するまですべてを停止したい場合は、ajax に option を渡しますasync: false。これにより、ajax 呼び出しが完了するまでブラウザーがフリーズします。

于 2012-10-18T16:09:22.317 に答える
2

以下を使用して ajax 同期を設定します。

 $.ajax({
    async:false,
    ...
})
于 2012-10-18T16:09:33.237 に答える