Хорошо, у меня есть ссылка на bit.ly, но теперь асинхронность jQuery мешает

Question

function dlLink(title, currentArray, currentIndex, currentOpts) 
    {
        var img = new Image();
        img.src = 'Gallery/Wallpapers/' + title;
        html = img.width + ' x ' + img.height + '<br />'
                + '<a class = "nav" href = "Gallery/Wallpapers/' + title + '" target = "_blank">Download</a><br />http://';

        // set up default options
        var defaults = {
            login:      '*************',
            apiKey:     '*******************************',
            longUrl:    'http%3A%2F%2Fschnell.dreamhosters.com%2Fwallpapers.php%3Fwp=' + title
        };

        // Build the URL to query
        var daurl = "http://api.bit.ly/v3/shorten?"
                    + "&login=" + defaults.login
                    + "&apiKey=" + defaults.apiKey
                    + "&longUrl=" + defaults.longUrl
                    + "&format=json&callback=?";

        // Utilize the bit.ly API
        $.getJSON(daurl, function(results)  {
            $('#fancybox-title').append(results.data["url"].substr(7));
        });

        if(img.complete)
            return html;
    }

Хорошо, смысл этой функции в том, что это обратный вызов Fancybox, который помещает HTML-контент в раздел title. В этом разделе я поместил разрешение изображения, ссылку для загрузки и ссылку bit.ly для возврата к изображению на этом сайте - http://schnell.dreamhosters.com/wallpapers.php?page=12 Первоначально у меня был XMLHTTPRequest проблемы с URL-адресом bit.ly, но, похоже, я их решил.

Однако теперь проблема в том, что мне нужна переменная 'html', чтобы иметь весь html-контент, который поступает в fancybox до появления оператора return. Хотя может показаться, что все происходит до оператора return, jQuery выполняет функцию $.getJSON() асинхронно, и поэтому не гарантируется, что в html будут содержаться данные до завершения dlLink. Мне нужен способ сделать так, чтобы порядок вещей происходил так, как показано в коде, чтобы запрос $.getJSON и последующая функция обратного вызова всегда заканчивали то, что они делают, прежде чем перейти к оператору return.

Изменить - я понял, что делать, и код выше правильно делает, как я хотел. Смотрите мой ответ ниже.

Answer 1

Итак, я наконец-то решил это, осознав несколько вещей.

1. Вы должны выполнять всю работу с данными JSON, находясь в функции обратного вызова $.getJSON ().

2 - область, в которой я пытался разместить ссылку, имела идентификатор 'fancybox-title', поэтому я просто пошел дальше и сказал $('#fancybox-title').append(stuff);

3 - Заголовок Fancybox (по крайней мере, показанный внутри) будет иметь размер только для тех строк текста, которые уже существуют к тому времени, когда функция форматирования заголовка закончила. Все, что будет добавлено к нему после, не будет учтено по размеру, и поэтому область заголовка останется прежней, и вы увидите, как строки текста ползут на картинке (выяснилось, что это трудно). Чтобы обойти это, я добавил третью строку в мою переменную html - <br />http:// Это сделало Fancybox размером своей области заголовка для 3 строк текста. Затем в функции обратного вызова я использовал substr, чтобы получить ссылку на bit.ly, начиная с http:// и до конца.