jQueryの各ループ内の配列へのプッシュ

Question

私はjQueryを使用してXMLファイルを解析していますが、XMLファイルの各要素をjQuery .eachループを使用して配列にプッシュしようとしています。不思議なことに、ループ内の配列の値を警告すれば、必要に応じて出力されますが、ループが終了した後に配列の値を警告しようとすると、結果は "未定義"になります。

この種のループ内で値を配列にプッシュすると、何か変なことがありますか？ここで


Javascriptのである：ここでは

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 

はXMLです：

<?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

正しいバリアント：

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]); 
}); 

あなたの亜種のコードで警告（splashArray [1]）; ajax get xml resultの前に実行されるため、インデックス1の要素に警告しようとするとsplashArrayが空になります。コードは、スレッドがサーバーの応答を待つ同期モードの場合のみ有効です。非同期モードでは、コールバック関数を使用する必要があります。コールバックと

バリアント：

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]); 
} 

または1つ以上のパターン（擬似コード）：

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

Answer 2

配列が移入される前に、あなたが警告しています。 XHR/Ajaxが非同期（同期とは対照的）であることを理解する必要があります。そのため、コールバック関数の後には、常にが実行されません。実際のHTTPリクエストを実行してxmlを取得し、コールバックは、XHRの処理が完了した後にそれが設定されることを保証します。

作品：

var splashArray = []; 

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

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

は動作しません：

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

あなたは標準のコールバックを使用しない場合は、他のオプションは、jQueryのイベントをトリガすることです。