javascript - ajax 呼び出しでグローバル変数を変更する

Question

私はかなり長い間これを正しくしようとしてきました.2番目のajax呼び出しの後に最初のajax呼び出しからオブジェクトを追加しようとしています. しかし、 for ループは、情報を追加する前に値を最後の結果に変更することを繰り返し、最後の投稿を毎回追加しているようです。

    var scribjson = 
{
    "user_id" : localStorage.viewing,
};
scribjs = JSON.stringify(scribjson);
var scrib = {json:scribjs};
$.ajax({
    type: "POST",
    url: "getScribbles.php",
    data: scrib,
    success: function(result)
    {     
        var obj = jQuery.parseJSON(result);
        for(var i = 0; i < obj.length; i+=1)
        {   
            var userjson = 
            {
                "user_id" : obj[i].user_id
            };
            userjs = JSON.stringify(userjson);
            var user = {json:userjs};
            localStorage.post = obj[i].post;
            $.ajax({
                type: "POST",
                url: "getRequestsInfo.php",
                data: user,
                success: function(result)
                {     
                    var obj2 = jQuery.parseJSON(result);
                    $('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
                    $('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
                },
                error: function()
                {
                    alert('An Error has occured, please try again.');
                }
            });

        }
    },
    error: function()
    {
        alert('An Error has occured, please try again.');
    }
});

Answer 1

successajax呼び出し以来、ループが終了した後に内側のajax呼び出しのすべての関数が呼び出されているように見えるため、i常に最後の反復値になります。

これを試して：

(function(i)
{

    $.ajax({
        type: "POST",
        url: "getRequestsInfo.php",
        data: user,
        success: function(result)
        {     
            var obj2 = jQuery.parseJSON(result);
            $('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
            $('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
        },
        error: function()
        {
            alert('An Error has occured, please try again.');
        }
    });
})(i);

これにより、 にクロージャーが作成されi、各 ajax 呼び出しに現在の値の独自のコピーが与えられます。

Answer 2

IIFE を使用します。

success: (function(i){return function(result) {
    var obj2 = jQuery.parseJSON(result);
    $('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
    $('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
}})(i),

など。現在、ループで生成された ajax 成功ハンドラーには、カウンター自体への直接参照が含まれており、(それらが呼び出されるまでに) 最終値に達しています。