자바 스크립트가 경고없이 실행되지 않습니다.

Question

코드 블록에 문제가 있습니다.이 섹션에서는 이전 단계에서 사용자가 선택한 것을 기반으로 초콜릿 상자를 만들고 API에서 데이터베이스에서 가져온 데이터를 만듭니다 스크립트. 문제는 경고 ('hi') 없이는 작동하지 않는다는 것입니다. 내가 그걸 꺼내면 그 안에 맛을 떨어 뜨리지 않고 그냥 빈 상자를 만들 것이고, 맛은 createFlavorArray 함수로 삽입됩니다.

var product = new Array(); 
var price = new Array(); 
var size = new Array(); 

$(function() { 
     $.ajax({ 
     type: 'POST', 
     url: 'phpscripts/api.php',  
     data: "", 
     dataType: 'json',  
      success: function(rows)   
     { 
     count = 0; 
      for (var i in rows) 
      { 
      var row = rows[i];   
       product[count] = row[0]; 
       price[count] = row[1]; 
       size[count] = row[2]; 
       count++; 
      } 
     } 
     }); 
    }); 

//b = box 
//o = option that is inside the box 
//nextBoxId is the box id 
//nextFlavorId is the option or flavor id 

var nextBoxId = 1; 
var nextFlavorId = 1; 
var orderCap = 0; 
var subTotal = 0; 
var numOfChocolates = 0; 
var numOfBoxes = 0; 

$(document).ready(function(){ 

    while (halfPoundBoxes > 0) { 
      $("#boxes").append('<div id="b'+nextBoxId+'"></div>'); 
      $('#b'+nextBoxId).addClass('div-table-selection'); 
      $('#b'+nextBoxId).append($('#minusBox').clone().attr('id', "m"+nextBoxId)); 
      $('#b'+nextBoxId).append('<div style="display:table-row"></div>'); 

      //call the function to loop through and create the number of flavor options needed 
      var x = 0; 
      alert('hi'); 
      while(x < product.length){ 
       if ('1/2lb Box' == product[x]) { 
        createFlavorArray(size[x], nextBoxId); 
        subTotal += price[x] * 1; 
        $('#b'+nextBoxId).attr('title', product[x]); 
       } 
       x++; 

      } 
      //clone the delete box button and make it visible 

      $('#m'+nextBoxId).show(500); 
      $('#b'+nextBoxId).append("<br />"); 

      if (orderCap == 0) { 
      $('#boxes').append('<div id="msg"><p>If you wish to add another box to your order select the size and click +1 Box.</p></div>'); 
      } 

      $("#m"+nextBoxId).click(function() { 
        $(this).parent().remove(); 
       orderCap--; 
       //if they're ordering zero boxes hide the order button 
       //remove total price 
       //remove the message 
       if (orderCap == 0) 
       { 
        document.getElementById('orderBtn').style.display = "none"; 
        $("#msg").remove(); 
        $("#totalPrice").empty(); 
       } 
       if (orderCap < 10) 
       { 
        $("#cap").remove(); 
        $("#addBox").show(500); 
       } 
       var y = 0; 
       while (y < product.length) { 
        if ('1/2lb Box' == product[y]) { 
        subTotal -= price[y] * 1; 
        numOfChocolates -= size[y] * 1; 
        } 
        y++; 
       } 
       $('#totalPrice').html("<p>Sub Total: " + subTotal + "</p>") 
       //subtract the new 
       $('#finalpaypal').val(subTotal); 

      }); 
      nextBoxId++; 
      orderCap++; 
      numOfBoxes++; 
      $('#totalPrice').html("<p>Sub Total: " + subTotal + "</p>") 
      halfPoundBoxes--; 
    } 

Answer 1

당신은 함수에 코드를 넣어 아약스 성공

... 
$(function() { 
    $.ajax({ 
    type: 'POST', 
    url: 'phpscripts/api.php',  
    data: "", 
    dataType: 'json',  
     success: function(rows)   
    { 
    count = 0; 
     for (var i in rows) 
     { 
     var row = rows[i];   
      product[count] = row[0]; 
      price[count] = row[1]; 
      size[count] = row[2]; 
      count++; 
     } 
     do_after_ajax(); 
    } 
    }); 
}); 

function do_after_ajax(){ 
     while (halfPoundBoxes > 0) { 
     $("#boxes").append('<div id="b'+nextBoxId+'"></div>'); 
     $('#b'+nextBoxId).addClass('div-table-selection'); 
     .... 
} 

Answer 2

alert()를 사용하는 경우 코드는 작동되는 이유는 alert() 행동이 당신의 success() 콜백 함수에 값을 반환하는 데 몇 초가 당신의 jQuery를 AJAX 요청을주고 있다는 점이다.

콜 아웃 함수의 영향을받는 코드를 콜 아웃 함수로 옮겨야이 코드가 올바른 순서로 실행됩니다.

---

은 또는 당신 async:false을 추가하여 asynchronosly 당신의 AJAX 요청을 실행할 수 없습니다 만, @Rocket이 주석 것처럼,이 방법은 사용하지 않는 것이 좋습니다.

$.ajax({ 
    async: false, 

Answer 3

아약스에서 반환 한 마크 업을 처리하는 것처럼 보입니다. 이 코드는 Ajax 요청의 성공 콜백으로 옮겨야한다. 경고 호출이 작동하게하는 이유는 단순히 페이지가 로딩을 완료 할 수있을만큼 지연되는 것입니다.