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