div只在調試時出現

Question

我得到了一段令我瘋狂的代碼。 我從服務器加載一些數據需要一些時間，因此我想顯示一個「加載圖標」。但該圖標沒有顯示，所以我在Chrome中調試了代碼，然後它正在工作。

$(".k-loading-mask").show(); 
//loading the data from the server 
var purchaseInvoiceItems = getOpenPurchaseInvoiceItems(id); 
viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items); 

var prepaymentableOrders = getPrepaymentableOrders(id); 
viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders); 
//loading done... hide the loading-icon. 
$("div.k-loading-mask").hide(); 

編輯：

function getOpenPurchaseInvoiceItems(id) { 
    var result = jQuery.ajax({ 
     url: '/purchaseinvoices/getopenpurchaseinvoiceitems', 
     data: JSON.stringify({ supplierId: id }), 
     async: false, 
     type: 'POST', 
     contentType: "application/json" 
    }); 
    var json = result.responseText; 
    var purchaseInvoiceItems = eval("(" + json + ")"); 
    return purchaseInvoiceItems; 
} 

function getPrepaymentableOrders(id) { 
    var result = jQuery.ajax({ 
     url: '/purchaseinvoices/getprepaymentableorders', 
     data: JSON.stringify({ supplierId: id }), 
     async: false, 
     type: 'POST', 
     contentType: "application/json" 
    }); 
    var json = result.responseText; 
    var purchaseInvoiceItems = eval("(" + json + ")"); 
    return purchaseInvoiceItems; 
} 

EDIT2

重構以異步AJAX我跑進問題的電話後，說的getOpenPurchaseInvoiceItems的done()永遠不會被調用。當我直接調用函數時調用getPrepaymentableOrders的done()。 但Chrome網絡分析告訴我，網絡交易在〜3秒後完成。 Maris答案也不適合我，done()永遠不會被調用。

function getOpenPurchaseInvoiceItems(id) { 
    $(".k-loading-mask").show(); 
    jQuery.ajax({ 
     url: '/purchaseinvoices/getopenpurchaseinvoiceitems', 
     data: JSON.stringify({ supplierId: id }), 
     type: 'POST', 
     contentType: "application/json" 
    }).done(function (data) { //This done is never called. 
     viewmodel.Items = ko.mapping.fromJS(data, {}, viewmodel.Items); 
     getPrepaymentableOrders(id); 
    }); 
} 

//This one works like a charm when called directly 
function getPrepaymentableOrders(id) { 
    jQuery.ajax({ 
     url: '/purchaseinvoices/getprepaymentableorders', 
     data: JSON.stringify({ supplierId: id }), 
     type: 'POST', 
     contentType: "application/json", 
    }).done(function (data) { 
     viewmodel.PrepaymentableOrders = ko.mapping.fromJS(data, {}, viewmodel.PrepaymentableOrders); 
     $("div.k-loading-mask").hide(); 
    }); 
} 

編輯3 增加了一個錯誤回調，這實際上被炒魷魚。

狀態200
狀態文本確定
responseText的（結果項的JSON）

我不安靜知道爲什麼結果有錯誤...

Fun-Fact： 這是有效的，似乎我的前任也有同樣的問題，因爲這個代碼是我的前輩代碼的修改版本。

.error(function (data) { 
    var json = data.responseText; 
    var purchaseInvoiceItems = eval("(" + json + ")"); 
    viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items); 
    getPrepaymentableOrders(id); 
}); 

好像結果不能被直接解析？

提琴手響應

HTTP/1.1 200 OK
服務器：ASP.NET開發服務器/ 11.0.0.0
日期：星期一，2015年9月28日11時29分15秒GMT
X -AspNet-Version：4.0.30319
X-AspNetMvc-Version：3.0
Cache-Control：private，s-maxage = 0
Content-Type：application/json;字符集= UTF-8
的Content-Length：126537
連接：關閉

[{ 「GoodsReceiptItemId」：311360 「PurchaseOrderNumber」： 「BE0010018」， 「SupplierProductNumber」： 「205.00-122」， 「ProductNumber」 ：「205.00-122」，「SupplierDeliveryNumber」：「5503」，「GoodsReceiptDate」：新日期（1442527200000），「描述」：「001-4631-00，\」LA-EE \「」，ShouldBePayed「：false ， 「金額」：500.00000， 「價格」：2.66000， 「PriceUnit」：1.00000， 「TotalPrice」：1330.00000， 「PurchaseOrderId」：309360， 「產品編號」：4792， 「GoodsReceiptId」：299080， 「ID」：0，」 HasBeenSaved 「：假，」 錯誤 「：{」 錯誤 「：[]，」 HasAnyError 「：假」 HasSumError「：假}，....]

Answer 1

由於在javascript中只有一個線程，並且您正在對api運行同步調用，所以在請求完成之前，UI將凍結。這就是爲什麼你根本沒有看到加載欄的原因。所以，你必須使用異步調用和承諾來實現你想要的。

下一個代碼應該可以工作。

function getOpenPurchaseInvoiceItems(id) { 
    return $.post('/purchaseinvoices/getopenpurchaseinvoiceitems', { supplierId: id }); 
} 

function getPrepaymentableOrders(id) { 
    return $.post('/purchaseinvoices/getprepaymentableorders', { supplierId: id }); 
} 


$(".k-loading-mask").show(); 
//loading the data from the server 
var purchaseInvoiceItemsPromise = getOpenPurchaseInvoiceItems(id); 
var prepaymentableOrdersPromise = getPrepaymentableOrders(id); 
$.when(purchaseInvoiceItemsPromise, prepaymentableOrdersPromise).done(function(purchaseInvoiceItems, prepaymentableOrders){ 
    viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items); 
    viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders); 
    $("div.k-loading-mask").hide(); 
}) 

切勿使用同步Ajax調用。如果你出於某種原因想要使用同步調用，那麼你肯定做錯了什麼。

Answer 2

嘗試使用異步調用，就像這樣：

jQuery.ajax({ 
     url: '/purchaseinvoices/getopenpurchaseinvoiceitems', 
     data: JSON.stringify({ supplierId: id }), 
     type: 'POST', 
     contentType: "application/json" 
    }).done(function(purchaseInvoiceItems){ 
     //..... 
    }) 

PS：千萬不要用 「EVAL」。如果你得到JSON，並且頭文件說它是JSON，那麼jquery足夠聰明，可以將結果轉換爲實際對象。 如果您需要將JSON字符串轉換爲對象，請使用JSON.parse