Как мне отредактировать глобальную переменную в функции JQuery $ .each?

Question

Хорошо, так что название, вероятно, не очень хорошо объясняет мой вопрос. Надеюсь, это имеет смысл. Это также мое первое приложение с jQuery, так что простите, если я делаю что-то глупое.

У меня есть следующая функция:

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
            imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
    }); 
}

getJSON правильно захватывает объект JSON. Возвращает что-то вроде этого:

{"image0":"images/19.10.FBB9.jpg","image1":"images/8.16.94070.jpg","image2":"images/8.14.47683.jpg","image3":"images/8.15.99404.jpg","image4":"images/8.13.20680.jpg","image5":"images/21.12.9A.jpg","image6":"images/8.17.75303.jpg"}

Я отлаживал и уверен, что data [i] правильно содержит путь к изображению, полученный из объекта JSON. Однако после вызова getRandomImages () я просматриваю свой глобальный массив imagesArray и замечаю, что ничего не изменилось. Я предполагаю, что он создает копию imagesArray вместо того, чтобы захватывать фактическую.

Может кто-нибудь сказать мне, что мне нужно сделать, чтобы мой глобальный imagesArray обновлялся в блоке $ .each? Нужно ли передавать imagesArray по ссылке как-нибудь? Извините, я немного растерялся.

Спасибо за помощь.

РЕДАКТИРОВАТЬ : некоторая справочная информация. Я заполняю массив случайных расположений изображений из БД. Я не хочу загружать все изображения из БД в массив одновременно, потому что их слишком много. Итак, у меня есть счетчик, который отслеживает, где я нахожусь в моем массиве изображений. Как только я закончу с изображением, я перемещаю указатель на следующее изображение. Если я доберусь до конца, мне нужно взять больше случайных изображений. Вот где вышеупомянутая функция js вызывается; он вызывает createImageArray.php, который получает x случайных изображений из БД и возвращает массив. Затем я хочу сохранить эти местоположения изображений в моем глобальном массиве images.

Я не уверен, как бы я реструктурировал свой код, чтобы учесть асинхронную природу .getJSON.

Answer 1

Здесь происходит то, что getJSON вызывается асинхронно. Таким образом, функция возвращается немедленно, и код внутри нее вызывается в какой-то момент позже. Только тогда массив изображений будет обновлен.

Вы можете заставить getJSON вести себя синхронно, но я бы не советовал. Вместо этого я рекомендую реструктурировать ваш код, чтобы учесть асинхронный характер запросов AJAX.

РЕДАКТИРОВАТЬ: Для создания синхронного запроса используйте параметр async ( ссылка ). Используйте общую функцию $.ajax или установите глобальные параметры AJAX. Причина, по которой я не рекомендую это, заключается в том, что он блокирует браузер. Если ваш сервер не отвечает своевременно, пользователь не сможет использовать свой браузер.

Не так сложно реструктурировать ваш код. Просто переместите свою логику для обработки массивов изображений в функции обратного вызова. Например вместо:

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
                imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
    }); 
   processImages();
}

до

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
                imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
        processImages();
    }); 
}

Answer 2

Хорошо, я не понял проблему в первый раз. Это немного глупо, но, не зная больше о вашем коде, я бы сказал, что при создании вашего imagesArray создайте bool imagesLoaded.

function getRandomImages(limit) {
    imagesArray = new Array();
    imagesLoaded = false;
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
                imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
        imagesLoaded = true;
    }); 
}

Затем после вызова getRandomImages () поместите ваш код в шаблон удержания с помощью setTimeout (), пока imagesLoaded = true. Да, и, возможно, разместите на странице какую-то загрузочную графику, чтобы пользователи могли на нее смотреть, чтобы они не думали, что ваше приложение сломано.

Answer 3

может быть, эта работа, работает для меня ..:)

$variable= new array();

$.getJSON("url", function(data){
asignVariable(data);
}

function asignVariable(data){
$variable = data;
}

console.log($variable);

Надеюсь, это поможет вам .. :)

Answer 4

Прежде всего: почему вы используете глобальную переменную? Это плохая идея, не делай этого. Вы можете делить переменные между функциями в данном пространстве имен следующим образом:

var NAMESPACE = {};
NAMESPACE.example = function() { 

    var myField = '1';

    return { 

        someMethod: function() { 
             return myField;
        }, 

        anotherMethod: function() { 
            return myField;
        } 
    };
}();

Во-вторых, что вы делаете после извлечения массива? Вы хотите отобразить изображения на странице или что-то? Не могли бы вы разместить на странице img-элементы вместо того, чтобы помещать их в массив?

Answer 5

попробуйте это:

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i, val) {
                imagesArray[i] = val;  //imagesArray is declared globally.
        });
    }); 
}