jQueryのajaxメソッドをforで繰り返し実行した時に期待した結果が得られませんでした。これは非同期で実行されているがための挙動だと思いますが、詳細は今のところ調査中です。forでループさせることはできませんでしたが、eachメソッドを使うことで正しく動くようになりました。動かないコードと動くコードを示します。
まず、ajaxのリクエストを受け付けるPHPです。Twitter APIを使って与えられたパラメータのTwitter IDのフォロー数とフォロワー数を取得してjsonで出力します。
get_twitter_status.php
[php]
status->user->friends_count . ‘”,’;
$json .= ‘”followed”: “‘ . $xml->status->user->followers_count . ‘”‘;
$json .= ‘}’;
print $json;
?>
[/php]
下記はajaxを使ってリクエストを行うスクリプトです。最初に取得したいTwitter IDを配列に格納して、格納されたIDの数だけリクエストを行うようにしました。そしてレスポンスをTwitter IDと一致するidが設定されたdiv要素にappendします。1つ目のforでループをしているものは正しく結果が表示されません。
index.html (動かないもの)
[html]
[/html]
下記はforをeachメソッドに変えたものです。こちらは意図していた通りの動きをします。
index.html (動くもの)
[html]
[/html]
非同期であることとAPIを使っているのでレスポンスを受け取るまでに遅延があることが原因だと推測していますが、jQueryのeachメソッドがそのあたりを吸収してくれているのでしょうか。同じような現象にひっかかった方はeachメソッドをお試しください。
ループ変数iのスコープが外側なのが原因かと。
forのほうは、successコールバックで参照しているiが同一の変数を指しているので、コールバックが実行されるときにはtargetId.lengthの値になってしまっているかと思います。
コメントありがとうございます。単純に僕のスコープに対する理解不足ですね…successのコールバックに正しいiを渡せるように何とか調べてみます。わざわざありがとうございました！