Javascript var выпущен рано

Question

У меня есть функция, которую я использовал несколько раз, но в этом случае модификации я, кажется, что-то пропускаю. У меня есть var listHTML, который я использую в качестве базы для добавления HTML, чтобы я мог обновлять HTML-файл div после завершения цикла for, но по какой-либо причине значение var равно NULL после завершения цикла for. Я думал, что создание ссылки на 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 запускается внутри цикл, она возвращает правильное значение, я бы ожидать, но один в конце функции вне для цикла возвращает нуль.

Answer 1

Ваш обратный вызов успеха ajax вызывается через некоторое время ПОСЛЕ завершения вашей функции. «A» в Ajax означает асинхронность.

Поэтому listHTML не был затронут, когда ваша функция заканчивается. Вы должны изменить listHTML внутри функции обратного вызова успеха и использовать ее там или передать ее другой функции в качестве аргумента, который вы вызываете из обратного вызова успеха. Вы не можете использовать его за пределами обработчика успеха так, как вы пытаетесь.