Her döngüde jQuery içinde bir dizi için itme

Question

Bir XML dosyasını ayrıştırmak için jQuery kullanıyorum ve her bir öğeyi XML dosyasında bir jQuery .each döngüsü kullanarak bir diziye zorlamaya çalışıyorum. Garip bir şekilde, döngü içindeki dizinin değerini uyarırsam gerektiği gibi çıkar, ancak döngü bittikten sonra dizide bir değer uyarmaya çalışırsam, "undefined" ile sonuçlanır.

Bu tür bir döngü içindeki değerleri bir diziye bastığınızda meydana gelen garip bir şey var mı?

<?xml version="1.0" encoding="UTF-8"?> 
<site>  
    <image src="splash1.jpg" /> 
    <image src="splash2.jpg" /> 
    <image src="splash3.jpg" /> 
    <image src="splash4.jpg" /> 
    <image src="splash5.jpg" /> 
    <image src="splash6.png" /> 
</site> 

Answer 1

Doğru varyant:

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     alert(splashArray[1]); 
}); 

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
    $('image', xml).each(function (i) { 
     splashArray.push($(this).attr("src")); 
    }); 
}); 

alert(splashArray[1]); // Results in undefined 

İşte

XML'dir: Burada


JavaScript olduğunuKod uyarlama değişkeninizde (splashArray [1]); ajax xml sonucunu almadan önce yürütür, bu nedenle, index 1 ile öğeyi uyarmaya çalıştığınızda splashArray boştu. Kodunuz sunucu yanıtı beklediğinde, kodunuz yalnızca senkron mod için iyi çalışır. Eşzamansız modda geri arama işlevini kullanmalısınız. geri arama ile

Varyant:

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     work_with_splash(); 
}); 

function work_with_splash() { 
    alert(splashArray[1]); 
} 

Ya bir daha desen (yalancı kod): Dizi doldurulan ediliyor önce

function process(ajax_is_done) { 
    if (!ajax_is_done) { 
     ajax(function (result) { 
      import_result(result); 
      process(true); 
     }) 
    } 
} 
process(); 

Answer 2

Sen uyarmış oluyorsunuz. XHR/Ajax'ın eşzamansız olduğunu (senkronize olanın aksine) anlayabilmeniz gerekir, bu nedenle uyarı her zaman geri arama işlevinden sonra çalışmayacaktır çünkü gerçek HTTP isteğinin xml'yi alması için birkaç saniye sürecektir. Geri arama, XHR öğelerinin bittikten sonra doldurulmasını sağlar.

İşleri:

var splashArray = []; 

function fn() { 
    alert(splashArray[1]); 
} 

$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     fn(); 
}); 

Çalışmaz:

var splashArray = []; 

$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     // this will populate the array almost always AFTER the alert below. 
}); 


alert(splashArray[1]); // this will almost ALWAYS alert BEFORE the callback function is done 

Answer 3

standart bir geri arama kullanmak istemiyorsanız, diğer seçenek jQuery olayı tetiklemek etmektir.