我正在写一个函数,在调用时应该用瓦片填充页面。瓦片数据是从远程数据库中获取的(因此是AJAX请求)。我也在代码中使用jQuery 3.0。执行命令bahaviour
下面是函数:
function populateDashboard() {
var tileBlueprint = '<div class="dashboard_tile">\
<div class="dashboard_tile_content">\
<table class="tile_table">\
<tr class="tile_title">\
<td>$title</td>\
</tr>\
<tr class="tile_data">\
<td>$value</td>\
</tr>\
</table>\
</div>\
</div>';
$.ajax({
url: 'http://' + AppVar.ServerUrl + '/restapi/Dashboard_GetData',
type: 'POST',
data: JSON.stringify({
'SessionId': AppVar.SessionId
}),
dataType: 'json',
contentType: "application/json",
success: function (data) {
if (data.ResultCode === '0') {
//current tiles get wiped
$('.dashboard_tile').fadeOut(100, function() {
$(".tile_handler").empty();
console.log("1 - " + Date.now())
});
//new tiles are parsed and data is injected into the string which represents the tile
//tiles are saved into an array
var json = $.parseJSON(data.TileData);
var tileArr = [];
$.each(json.tiles, function (index, element) {
tile = tileBlueprint.replace("$title", $.i18n("dashboard-" + element.title));
tile = tile.replace("$value", element.value);
tileArr[index] = tile;
console.log("2 - " + Date.now())
});
//now I loop trough the previously created array to populate the page
$.each(tileArr, function (index, element) {
setTimeout(function() {
$(element).hide().appendTo(".tile_handler").fadeIn(1000);
}, 1000 * index); //delay made longer to see the effect better
console.log("3 - " + Date.now())
});
} else {
ons.notification.alert($.i18n('error-retriving_data_problem'));
return;
}
},
error: function (request, error) {
ons.notification.alert($.i18n('error-conn_error'));
return;
}
});
}
我不认为这个地方是越来越注入HTML是relevat作为部分工作正常。
的问题是,淡出两者每个循环,即获得在成功叫,得到标注出故障了。我试图在记录每个得到执行的时间,这就是我得到:
//first run
2 - 1469707068268 (6 times)
3 - 1469707068269 (6 times)
//second run
2 - 1469707181179 (2 times)
2 - 1469707181180 (3 times)
2 - 1469707181181
3 - 1469707181181
3 - 1469707181182 (4 times)
3 - 1469707181183
1 - 1469707181283
1 - 1469707181284 (2 times)
1 - 1469707181285 (2 times)
1 - 1469707181286
我显示6瓦,所以评论和应该解雇6次,只有1 一旦。
为什么不执行第一?
为什么执行了6次?编辑:只是我自己现在。
如果最后执行,它为什么不删除以前创建的所有瓷砖?
另一个问题是,它第一次显示6个瓷砖,但第二个(和以后),它只显示5个瓷砖(第一个缺失)。
任何人都可以帮助我解释发生了什么,我该如何避免这种行为?
谢谢。
我试过不使用'JSON.stringify',但后来我的.NET后端没有收到数据。对于'$ .each(data.TileData.tiles,function(index,element){',这里的代码根本没有任何反应,不知道我的后端是不是奇怪的或者什么的。“ – rancor1223
对不起,你是正确的'$ .each(data.TileData.tiles,function(index,element){'。它不工作,因为我只是从后端解析一个JSON字符串作为占位符输出。现在我的后端是发送适当的JSON,你的解决方案是正确的。 – rancor1223
@ rancor1223很高兴我能帮忙! – MonkeyZeus