Comment modifier une variable globale dans une fonction JQuery $ .each?

Question

Ok, donc ce titre n'explique probablement pas bien ma question. J'espère que cela a du sens. C'est aussi ma première application avec jQuery, alors pardonnez-moi si je fais quelque chose de stupide.

J'ai la fonction suivante:

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. 
     }); 
    }); 
} 

Le getJSON est correctement l'objet à détourner JSON. Elle retourne quelque chose comme ceci:

{"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"} 

J'étais débogage et je suis confiant que les données [i] correctement contient le chemin d'image saisi de l'objet JSON. Cependant, après l'appel de getRandomImages(), je regarde mon global imagesArray et remarque que rien n'a été changé. Je suppose qu'il est en train de créer une copie du fichier imagesArray au lieu d'en saisir une. Est-ce que quelqu'un peut me dire ce que je dois faire pour que mon global imagesArray soit mis à jour dans le bloc $ .each? Ai-je besoin de passer en imagesArray par référence en quelque sorte? Désolé, je suis un peu perdu.

Merci pour l'aide.

EDIT: Informations générales. Je remplis un tableau d'emplacements d'images aléatoires de la base de données. Je ne veux pas charger toutes les images de la base de données dans un tableau à la fois, car il y en a trop. Donc, j'ai un compteur qui garde la trace de l'endroit où je suis dans mon tableau d'image. Une fois que j'ai terminé avec une image, je déplace le pointeur vers l'image suivante. Si j'atteins la fin, j'ai besoin de saisir des images plus aléatoires. C'est là que la fonction js ci-dessus est appelée; il appelle createImageArray.php qui saisit x images aléatoires de la base de données et renvoie un tableau. Je veux ensuite stocker ces emplacements d'images dans mon global imagesArray.

Je ne sais pas comment je pourrais restructurer mon code pour prendre en compte la nature asynchronouos de .getJSON.

Answer 1

Ce qui se passe ici est que le getJSON est appelé de manière asynchrone. Ainsi, la fonction retourne immédiatement et le code qui s'y trouve est appelé plus tard à un moment donné. Ce n'est qu'à ce moment-là que le fichier imagesArray sera mis à jour.

Vous pourriez avoir le getJSON se comporter de manière synchrone, mais je ne le recommanderais pas. Je recommande plutôt de restructurer votre code pour prendre en compte la nature asynchrone des requêtes AJAX.

EDIT: Pour faire une demande synchrone utiliser l'option async (link). Utilisez la fonction générale $.ajax ou définissez les options globales AJAX. La raison pour laquelle je ne recommande pas ceci, c'est qu'il verrouille le navigateur. Si votre serveur ne répond pas dans les délais, l'utilisateur ne pourra pas utiliser son navigateur.

Il n'est pas si difficile de restructurer votre code. Il suffit de déplacer votre logique pour gérer les tableaux d'images dans la fonction de rappel. Par exemple au lieu de:

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(); 
} 

do

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

essayez ceci:

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. 
     }); 
    }); 
} 

Answer 3

Tout d'abord: Pourquoi vous utilisez une variable globale? C'est une mauvaise idée, ne le faites pas.Vous pouvez partager des variables entre les fonctions au sein d'un espace de noms donné comme ceci:

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

    var myField = '1'; 

    return { 

     someMethod: function() { 
      return myField; 
     }, 

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

Deuxièmement, que faites-vous après le tableau est tiré par les cheveux? Voulez-vous afficher les images sur la page ou quelque chose? Pourriez-vous au img-éléments à la page au lieu de les mettre dans le tableau?

Answer 4

D'accord, je n'ai pas compris le problème la première fois. C'est un peu hackey, mais sans en savoir plus sur votre code je dirais quand vous créez votre imagesArray créer un 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; 
    }); 
} 

Puis, après que vous appelez getRandomImages() mettre votre code dans un modèle de maintien avec setTimeout() jusqu'à ce que imagesLoaded = true. Oh, et peut-être mettre une sorte de graphique de chargement sur la page pour l'utilisateur à regarder afin qu'ils ne pensent pas que votre application est cassée.

Answer 5

peut-être ce travail, travaille pour moi .. :)

$variable= new array(); 

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

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

console.log($variable); 

Je espère que ça vous aider .. :)