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

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

1 голос
/ 05 октября 2010 
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.

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

1 Ответ

0 голосов
/ 06 октября 2010

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

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

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

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

...