Переменная обратного вызова JSONP, ограниченная аномалия

Question

У меня есть глобальный массив, который я хочу заполнить URL-адресами JPEG в Flickr. Я намерен передать этот массив между функциями.

Когда я пытаюсь прочитать содержимое массива (или console.log из main.js:40) из моей функции обратного вызова JASONP, оно кажется пустым. Тем не менее, из консоли браузера это выглядит нормально (снимок экрана). Мой обратный вызов JASONP кажется способным array.push() но не умею читать array[i].src,

Что тут происходит?

Я, кажется, неправильно понимаю, как переменные ограничены от обратных вызовов JASONP. Может ли кто-нибудь просветить меня (с точки зрения непрофессионалов), что происходит здесь, и показать мне, как это должно выглядеть?

JSFiddle здесь - http://jsfiddle.net/Nyquist212/7gtxetxj/

function UrlExists(url, callback) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url);
    http.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            callback(this.status = 200);
        }
    };
    http.send();
};

var images = []; // Store imgs in here

$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&jsoncallback=?",
      { 
          api_key : "da2015d88b5eab3b3d7d989c13c4d430",
          content_type : 1,
          text : "landscape, beach, coast, surf, black, white",
          format : "json",
          per_page : 10
      },

      function jsonFlickrApi (results) { // my JSONP callback func 

            for (var i=0; i < results.photos.photo.length; i++) {
                var farm    = results.photos.photo[i].farm;
                var id      = results.photos.photo[i].id;
                var server  = results.photos.photo[i].server;
                var secret  = results.photos.photo[i].secret;
                var furl    = "https://farm" + farm + ".staticflickr.com/" + server + "/" + id + "_" + secret + "_m" + ".jpg";

                if (!UrlExists(furl, mycallback)) {
                    function mycallback(results){
                        images.push({"src":furl}); 
                        };
                    $("<img />").attr("src", furl).appendTo("#one");              // This works...
                    //$("<img />").attr("src", images[i].src).appendTo("#one");   // Why wont this work?
                }; 
            }; // End for 

            console.log(images); // Returns empty!?!

      } // End jsonFlickrApi
); // End getJSON

Спасибо.

Answer 1

Этот код:

if (!UrlExists(furl, mycallback)) {
    function mycallback(results) {
        images.push({
            "src": furl
        });
    };
    $("<img />").attr("src", furl).appendTo("#one"); // This works...
    //$("<img />").attr("src", images[i].src).appendTo("#one");   // Why wont this work?
};

никогда не называет это mycallback функция, и, следовательно, ничего не добавляется к images, (Также обратите внимание, что вы не ставите ; после закрытия } блока, прикрепленного к оператору потока constrol, например if.)

Если предположить, UrlExists ожидает, что вы передадите ему обратный вызов по какой-то причине и вызовет этот обратный вызов асинхронно, вам нужно будет на самом деле передать ему функцию, и вам нужно будет убедиться, что при вызове функции она вызывается с правом furl (так как если это называется асинхронным, furl вы используете в настоящее время будет изменено до вызова обратного вызова). То же самое относится и к i в вашем закомментированном коде. С этими допущениями вы можете сделать следующее:

function jsonFlickrApi(results) { // my JSONP callback func 

    results.photos.photo.forEach(function(photo) {
        var furl = "https://farm" + photo.farm +
                   ".staticflickr.com/" +
                   photo.server + "/" +
                   photo.id + "_" +
                   photo.secret + "_m" + ".jpg";
        UrlExists(furl, function() {  // I assume this is called if the URL does exist, and that that's what you want 
            images.push({
                "src": furl
            });
            $("<img />").attr("src", furl).appendTo("#one");
        });
    });

    // Note that `images` will still be empty here, waiting for the callbacks
    // from UrlExists

} // End jsonFlickrApi

Теперь ничего в UrlExists обратный вызов полагается на что-то, что изменится до того, как обратный вызов произойдет, потому что новый, отдельный furl создается для каждого звонка на forEach Перезвоните.