JS / AJAX / JSON

Question

Я новичок в разборе JS / AJAX и JSON. Я уже некоторое время пытаюсь отладить этот фрагмент кода, и я не могу понять это.

Я пытаюсь добавить значения в динамические div, но $ ("#" + id) внутри запроса AJAX всегда имеет последнее значение id внутри цикла for. Он не добавляется каждый раз, когда цикл for увеличивается до следующего значения div id.

Кто-нибудь знает, что не так? или AJAX-запросы такие?

Переменная myID в конце была для отладки. MyID получает значение id отлично, но кажется, что AJAX-запрос не выполняется до тех пор, пока не будет запущено последнее значение цикла for.

Любая помощь будет оценена.

    for (var x = 0; x < days.length; x++) {
            var y = days[x];
            var id = location + "_day_" + y;
            $("#" + location).append("<div id='" + id + "'><h2>Day #" + y + "</h2></div>");

            $.ajax
            ({
                type: "GET",
                url: jsonFile,
                dataType: "json",
                success: function(json) {

                    for (var i = 0; i < json.trips.length; i++) {
                        var name = json.trips[i].name;
                        var cost = json.trips[i].cost;

                        radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>";
                        $("#" + id).append(radioButton);
                    }
                }
            });
            var myID = id;
    }

Answer 1

Это связано с тем, что обратный вызов Ajax не вызывается позднее (после завершения запроса), и к тому времени значение id будет последним значением в цикле.Чтобы решить эту проблему, необходимо использовать замыкание:

{
   type: "GET",
   url: jsonFile,
   dataType: "json",
   success: (function(id){
            return function(json) {

                for (var i = 0; i < json.trips.length; i++) {
                    var name = json.trips[i].name;
                    var cost = json.trips[i].cost;

                    radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>";
                    $("#" + id).append(radioButton);
                }
            };
        })(id)
}

Теперь функция получает идентификатор в качестве локальной переменной вместо использования переменной во внешней области видимости, которая изменилась с момента создания этой функции.

Чтобы помочь вам понять, вот пример того, что с вами происходит: http://jsfiddle.net/qXCKZ/ Обратите внимание, как оповещается о новом значении id.

Вот решение, которое создаетлокальная копия переменной с использованием замыкания: http://jsfiddle.net/DAwNz/

Answer 2

Если он просто добавляет свойство async: false к вызову. тогда это будет работать.

Answer 3

Ajax-запросы являются асинхронными, то есть запрос запускается, когда вы делаете вызов $ .ajax, но он продолжает проходить через код, а не ждать ответа.Цикл for очень быстрый, поэтому к тому времени, когда возвращается запрос ajax, цикл for уже завершил работу.Кроме того, поскольку переменная ID является локальной для содержащей функции, она не будет использоваться до тех пор, пока не будет вызвана функция успеха.

Чтобы решить эту проблему, используйте замыкание.Это позволит вам передать значение переменной ID в момент, когда вы выполняете вызов ajax.

Например:

$.ajax({
  ...
  success: (function (id) {
      return function(json) {
        ...
      }
    }(id));
});

Наличие (id) в конце этогоФункция выполняет функцию, как только код обрабатывается, и делает id локальной переменной для этого контекста.Затем он возвращает функцию обратного вызова, которую вы пытались определить в первую очередь.

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

Answer 4

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