我的JavaScript沒有提示沒有運行

我的代碼塊有問題，本節根據用戶在上一步中選擇的內容創建了一盒巧克力，以及在api中從數據庫中提取了哪些數據腳本。問題在於，如果沒有警報（'hi'），它就無法正常工作。如果我把它拿出來，它只會創建一個空盒子而不會丟棄其中的味道，使用createFlavorArray函數插入味道。我的JavaScript沒有提示沒有運行

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--; 
    }

來源

2012-08-15 Jeff

AJAX是異步之後，因此呼叫完成之前運行的代碼。 'alert'延遲了代碼，當你關閉它時，AJAX調用就完成了。 – 2012-08-15 19:54:59

您需要將代碼放在一個函數並運行它的AJAX成功完成

... 
$(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'); 
     .... 
}

來源

2012-08-15 20:06:56 cuzzea

它似乎從來沒有調用函數，當我改變它。 – Jeff 2012-08-15 20:14:22

沒關係，我得到它的工作。 – Jeff 2012-08-15 20:16:45

使用alert()當你的代碼只工作的原因，是該alert()動作給你的jQuery AJAX請求幾秒鐘的值返回到您success()回調函數。

您應該將任何受您的調出函數影響的代碼移動到調出函數中，以便此代碼以正確的順序運行。

或者你不能asynchronosly加入async:false運行AJAX請求，但作爲@Rocket曾評論，不建議這樣做。

$.ajax({ 
    async: false,

來源

2012-08-15 19:56:09 Curt

我***高度***建議**不**使用'async：false'。它會**鎖定瀏覽器並使其無響應，直到AJAX調用完成。您應該使用回調。 – 2012-08-15 19:57:56

@火箭感謝您的評論，我沒有考慮過'async：false'可能會造成不良影響。歡呼的信息。 – Curt 2012-08-15 20:02:19

好吧，將其更改爲async：false確實可以使其正常工作，但確實會鎖定，但僅限於一秒鐘。所以我會將創建框代碼移入api ajax調用的成功函數中。 – Jeff 2012-08-15 20:07:35

它看起來像你試圖操作你的ajax返回的標記。該代碼需要移入ajax請求的成功回調。警報調用使其工作的原因很簡單，它會將其他所有內容延遲足夠長的時間，以便頁面完成加載。

來源

2012-08-15 19:56:25 sgrif

我的JavaScript沒有提示沒有運行

回答

相關問題