2013-02-22 3 views
2

Я не могу обернуть голову вокруг закрытия javascript. Я хочу 4 случайных числа, но получаю только один последний реплицированный 4 раза.Закрытие и проблемы с Javascript

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

<div class="number"></div> 
<div class="number"></div> 
<div class="number"></div> 
<div class="number"></div> 

A working plunker example

Любые намеки?

+1

Whoa whoa whoa .. Знаете ли вы, что JavaScript может генерировать собственные случайные числа? – Aesthete

+1

@Aesthete: Конечно, * pseudo * -случайные. random.org делает * реальная вещь *. –

+0

@ExplosionPills: зависит от того, поддерживает ли random.org [CORS] (http: //www.w3.org/TR/access-control /) и позволяет все происхождение. –

ответ

4

Запрос get находится в кэше.

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

(То есть ваше понимание затворов правильно и код работает правильно).

Из комментариев, потому что это имеет отношения:

Вы можете запросить несколько номеров из random.org в том же таймере на их API. Вместо того, чтобы использовать четыре запроса, используйте num=' + $(".number").length, а затем сделать немного синтаксического анализа

+0

«Запрос на получение кэшируется». --- http://imgs.xkcd.com/comics/random_number.png ;-) – zerkms

+0

Спасибо! Это спасло мой день! Одно замечание состоит в том, что он лучше работает с + Math.random() вместо + (новая дата) .getTime(), поскольку метка времени может с большой вероятностью иметь одно и то же значение дважды подряд. – kvaale

+0

@kvaale Вы можете запросить несколько номеров из random.org по одному таймеру за свой API. Вместо того, чтобы использовать четыре запроса, используйте 'num = '+ $ (". Number "). Length', а затем немного разобрать –

0

Это немного запутывает то, что вы пытаетесь достичь своими верхними функциями. Если все, что вы хотите сделать, это установить новое случайное число для элемента, вам не нужно ни одно из них.

Используйте ajax, чтобы указать несколько параметров по вашему запросу. В частности, вы хотите остановить кэширование своего запроса. Вы также можете указать контекст для ссылки на ваш элемент .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 
    }); 
}); 

Это решение скрипку here.

+0

Даже ваши намерения не работают: http://jsfiddle.net/hCEbd/2/ - однако '$ (this)' в обратном вызове ajax - это jqXHR, а не элемент. –

+0

Я имею в виду 'this' в обратном вызове, но' $() 'на jqXHR не полезен –

+0

@ExplosionPills - вы правы, немного поигрались и модифицировали решение. – Aesthete

-1

работ: http://plnkr.co/edit/XTOI20kGbFbzdtDaqpLZ

Ваш запрос кэшируются. Кстати, получение данных в цикле - это не очень хорошая идея.

+0

Да, я сказал, что уже ... –

+0

@ Explosion Pills, на самом деле, мы сказали это на то же время – Microfed

+0

Stackoverflow не будет достаточно определенно из-за количества пройденного времени, но я помню, что ваш ответ был * восемь минут * после моего. Если бы ваш ответ был в течение одной-двух минут, я бы ничего не сказал, но, по моему мнению, владелец должен удалить точный дублирующий ответ после этого количества времени. (Между прочим, это был не я, который вас ниспадал). –

-1

Любой запрос jquery ajax, такой как $ .get, изменяет область действия. Если вы хотите повторно использовать функцию setNewWord, она должна быть либо глобальной, либо ограниченной в результате получения.

Посмотрите на jsfiddle. http://jsfiddle.net/justengland/hJnXb/2/

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

}

$ (функция() {

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

});

Смежные вопросы