Zastanawiam się, dlaczego w kodzie poniżej zmiennej I nadal pokazuje "5" zamiast pokazać "1" , a następnie "2 " następnie " 3 " i tak dalej? Musi być problemem zakresu, ale tak naprawdę nie otrzymuję tego, jak zmieniłem zakres zmiennej w zakresie globalnego i domowego i wciąż uzyskaj ten sam problem. Kiedy ostrzegam i poza funkcją Ajax, działa dobrze.

for (var i = 0; i < 5; i++) {   
   $.ajax({
        url: '/echo/html/',
        method:'post',
        data: {
            html: 'Ajax data'
        },
        success: function (resp) {
            $('#success').append(i) // always 5
        }
    })
    $('#outsideAjax').append(i); // is okay
}

Oto Fiddle

EDYTUJ:

Poszedłem na rozwiązanie @tushar Gupta , ponieważ najlepiej odpowiada moim potrzebom, ale dostaję kolejny problem, iteracja nie działa, jeśli ustawię tę opcję: ProcessData: False ProcessData: False >

Zobacz Fiddle

Dlaczego to nie działa?

1
tcj 2 grudzień 2013, 20:33

4 odpowiedzi

Najlepsza odpowiedź

Fiddle Demo

var i = 0;

function ajax_call() {
    $.ajax({
        url: '/echo/html/',
        method: 'post',
        data: {
            html: 'Ajax data'
        },
        success: function (resp) {
            $('#success').append(i++);
            if (i < 5) {
                ajax_call();
            }
        }
    });
    $('#outsideAjax').append(i);
};
ajax_call();
0
Tushar Gupta - curioustushar 2 grudzień 2013, 16:40

Wynika to z zamknięć w JavaScript. Oto poprawka -

for (var i = 0; i < 5; i++) { 
   (function(i){
    $.ajax({
        url: '/echo/html/',
        method:'post',
        data: {
            html: 'Ajax data'
        },
        success: function (resp) {
            $('#success').append(i) 
        }
    })
    })(i);

    $('#outsideAjax').append(i); 
}
3
Shreyas 2 grudzień 2013, 16:36

Możesz naprawić to za pomocą zamknięć, owijając wartość I:

for (var i = 0; i < 5; i++) {   
   (function(val){
      $.ajax({
          url: '/echo/html/',
          method:'post',
           data: {
               html: 'Ajax data'
           },
           success: function (resp) {
               $('#success').append(val);
           }
       })
       $('#outsideAjax').append(val); // is okay
     })(i);
}
1
Bryan Azofeifa 2 grudzień 2013, 16:47

Rozwiązanie za pomocą Function#bind() :
. http://jsfiddle.net/rqncd/1/

for (var i = 0; i < 5; i++) {   
  $.ajax({
    url: '/echo/html/',
    method:'post',
    data: {
      html: 'Ajax data'
    },
    success: (function (i, resp) {
      $('#success').append(i);
    }).bind(null, i)
  });
  $('#outsideAjax').append(i);
}
0
Florent 2 grudzień 2013, 16:38