javascript - Javascript var が早期にリリースされる

Question

私は何度も使用した機能を持っていますが、この 1 つの変更のケースでは、何かが欠けているようです。HTML を追加するベースとして使用している varlistHTMLがあるので、for ループの完了後に div の HTML を更新できますが、何らかの理由で、for ループの完了後に var の値が NULL になります。ループが実行される前にループの外側で var への参照を作成するだけで、関数が終了するまでそれをメモリに保持するのに十分だと思いました...そうではないと思います。

コード：

var listHTML = '';

    for(var j = 0; j < arr.length; j++)
    {
        var product = arr[j].split(",");
        var key = product[1];

        $.ajax({
            url:"http://domain.com/dir/get.php?key="+encodeURIComponent(key),
            dataType: 'jsonp', 
            success:function(json){

                var i = 0;

                while(json[i])
                {
                    listHTML += '<div class="row">';
                    listHTML += '<div class="image"><img src="'+json[i]["image"]+'"/></div>';
                    listHTML += '<div class="title">'+json[i]["title"]+'</div>';
                    listHTML += '<div class="quantity"><input type="number" id="'+key+'" value="'+product[0]+'"/></div>';
                    listHTML += '<div class="actions"><img src="/_newsite/images/icons/trash.png" onclick="removeFromCart('+"'"+key+"'"+')" title="Remove From Cart/><img src="/_newsite/images/icons/update.png" onclick="updateCart('+"'"+key+"'"+')" title="Update Quantity"/></div>';
                    listHTML += '</div>';

                    i++;
                }

                console.log(listHTML);

            },
            error:function(){
                alert("Error");
            },
        });

    }

    console.log(listHTML);

console.log が for ループ内で実行されると、期待どおりの適切な値が返されますが、for ループ外の関数の最後の値は null を返します。