Javascript 执行命令

我正在编写一个函数，该函数在调用时应使用平铺填充页面。瓷砖上的数据是从远程数据库获取的（因此是AJAX请求）。我还在代码中使用jQuery3.0

函数如下：

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

我正在显示6个互动程序，因此评论2和3应该触发6次，而1只能触发一次

• 为什么不先执行1

• 为什么执行了6次1编辑：刚才我自己就想到了

• 如果最后执行1，为什么不删除之前创建的所有分幅

另一个问题是，第一次显示6个磁贴，但第二次（以及以后），它只显示5个磁贴（第一个磁贴丢失）

任何人都可以帮我解释发生了什么，我怎样才能避免这种行为

---

谢谢。

我发现您的代码存在多个问题，因此我可以推荐以下内容：

---

应该是

data: {'SessionId': AppVar.SessionId},

因为jQuery的AJAX函数将为您转换它

---

尝试

console.log（data.TileData）；如果您已经收到一个JS对象/数组，那么就没有理由调用
var json=$.parseJSON（data.TileData）所以你应该删除它


而不是

$.each(json.tiles, function (index, element) {`

使用


现在来看最后一个问题，
fadeOut（）
和
fadeIn（）
被无序调用

试试这个：

// Make sure the fadeOut() finishes before calling more stuff!!!

//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 tileArr = [];
    $.each(data.TileData.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())
    });
});

我发现您的代码存在多个问题，因此我可以推荐以下内容：


应该是

data: {'SessionId': AppVar.SessionId},

因为jQuery的AJAX函数将为您转换它


尝试
console.log（data.TileData）；如果您已经收到一个JS对象/数组，那么就没有理由调用
var json=$.parseJSON（data.TileData）所以你应该删除它


而不是

$.each(json.tiles, function (index, element) {`

使用


现在来看最后一个问题，
fadeOut（）
和
fadeIn（）
被无序调用

试试这个：

// Make sure the fadeOut() finishes before calling more stuff!!!

//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 tileArr = [];
    $.each(data.TileData.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())
    });
});

为什么1不先执行，为什么1执行6次

从的文档中，第二个参数是“动画完成后调用的函数，每个匹配元素调用一次”

因此，在这种情况下，函数将在~100ms（您提供的作为第一个参数的延迟）后调用，并将被调用六次（每个匹配的元素调用一次）

如果最后执行1，为什么不删除之前创建的所有分幅

如上所示，1在100ms后运行。但是，实际节点添加在
1000*索引
ms之后：

setTimeout(function () {
    $(element).hide().appendTo(".tile_handler").fadeIn(1000);
}, 1000 * index);

因此，对于除第一个节点外的所有节点，实际附加节点的代码都在1之后运行。但是，对于第一个节点（注意：索引0=>1000*0=0ms延迟），appendTo代码直接运行，这意味着在100ms后调用
.empty（）
时，它实际上将被删除，这意味着您将只看到6个节点中的5个

这些问题的解决方案是以某种方式“同步”代码，使其以您期望的方式运行。这通常是回调函数的用途，您可以将完成某项操作后要运行的代码放入回调函数中。在这种情况下，一种解决方案是将“添加”代码移动到淡出回调中：

$('.dashboard_tile').fadeOut(100).promise().done(function () {
    $(".tile_handler").empty();
    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;
    });
    // ...
});

注意
.promise.done
的用法，它在所有元素完成动画制作后为我们提供一个回调，而不是每个元素一个回调

为什么1不先执行，为什么1执行6次

从的文档中，第二个参数是“动画完成后调用的函数，每个匹配元素调用一次”

因此，在这种情况下，函数将在~100ms（您提供的作为第一个参数的延迟）后调用，并将被调用六次（每个匹配的元素调用一次）

如果最后执行1，为什么不删除之前创建的所有分幅

如上所示，1在100ms后运行。但是，实际节点添加在
1000*索引
ms之后：

setTimeout(function () {
    $(element).hide().appendTo(".tile_handler").fadeIn(1000);
}, 1000 * index);

因此，对于除第一个节点外的所有节点，实际附加节点的代码都在1之后运行。但是，对于第一个节点（注意：索引0=>1000*0=0ms延迟），appendTo代码直接运行，这意味着在100ms后调用
.empty（）
时，它实际上将被删除，这意味着您将只看到6个节点中的5个

这些问题的解决方案是以某种方式“同步”代码，使其以您期望的方式运行。这通常是回调函数的用途，您可以将完成某项操作后要运行的代码放入回调函数中。在这种情况下，一种解决方案是将“添加”代码移动到淡出回调中：

$('.dashboard_tile').fadeOut(100).promise().done(function () {
    $(".tile_handler").empty();
    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;
    });
    // ...
});

请注意
.promise.done
的用法，它在所有元素完成动画制作后为我们提供一个回调，而不是每个元素一个回调。
我尝试不使用
JSON.stringify
，但是我的.NET后端没有接收到数据。对于
$也是一样。每个（data.TileData.tiles，函数（index，element）{
，其中代码根本没有响应。不确定我的后端是否奇怪或是什么。抱歉，关于
$，您是对的。每个（data.TileData.tiles，函数（index，element）{
。它不起作用，因为我只是从后端解析一个JSON字符串作为占位符输出。现在，我的后端正在发送正确的JSON，您的解决方案是正确的。@rancor1223很高兴我能提供帮助！我尝试不使用
JSON.stringify
，但我的.NET后端没有接收到数据。
$也是如此（data.TileData.tiles，函数（索引，元素）{
，其中代码根本没有响应。不确定我的后端是否奇怪或是什么。抱歉，关于
$，您是对的。每个（da