Javascript fermetures et problèmes de portée

Question

Je n'arrive pas à comprendre les fermetures de javascript. Je veux 4 chiffres aléatoires, mais n'obtiens que le dernier répliqué 4 fois.

Javascript

$(function() {      

  function setNewNumber(element) {
    return function (newNumber) {
      element.text(newNumber);
    }
  }

  $('.number').each(function() {
      $.get('http://www.random.org/integers/?num=1&min=1&max=6&col=1&base=10&format=plain&rnd=new', 
        setNewNumber($(this))
      );
  });

});

HTML

Un exemple plunker fonctionnel

Des indices?

Answer 1

La requête get est mise en cache.

http://jsfiddle.net/hCEbd/1/

(C'est-à-dire que votre compréhension des fermetures est correcte et que le code fonctionne correctement).

D'après les commentaires, car c'est pertinent :

Vous pouvez demander plusieurs nombres à random.org en même temps via leur API. Au lieu d'utiliser quatre requêtes, utilisez num=' + $(".number").length et ensuite faites un peu d'analyse

Answer 2

Il est un peu confus ce que vous essayez d'accomplir avec vos fonctions principales. Si tout ce que vous voulez faire est définir le nouveau nombre aléatoire à l'élément, vous n'avez besoin d'aucune des deux.

Utilisez ajax pour spécifier quelques paramètres à votre requête. En particulier, vous voulez arrêter le mise en cache de votre requête. Vous pouvez également fournir un contexte pour faire référence à votre élément .number.

$('.number').each(function() {
  $.ajax({
      type: "GET",
      url: 'http://www.random.org/integers/?num=1&min=1&max=6&col=1&base=10&format=plain&rnd=new',
      context: this,
      success: function(data) { 
        $(this).text(data); 
      },
      cache: false
  });
});

Cette solution est disponible sur ce lien.

Answer 3

Fonctionne : http://plnkr.co/edit/XTOI20kGbFbzdtDaqpLZ

Votre demande est en cours de mise en cache. Au fait, obtenir des données en boucle - ce n'est pas une bonne idée.

Answer 4

Toute requête ajax jquery, comme $.get, modifie la portée. Si vous voulez réutiliser votre fonction setNewWord, elle doit être soit à portée globale soit à portée dans le résultat de la requête.

Jetez un oeil au jsfiddle. http://jsfiddle.net/justengland/hJnXb/2/

function setNewWord(element) {
$('#output').append(element + '');

}

$(function () {

$(numbers).each(function () {
    var url = 'http://www.random.org/integers/?num=1&min=1&max=6&col=1&base=10&format=plain&rnd=new';
    $.get(url, setNewWord);
});

});