javascript - 执行顺序行为

Question

我正在编写一个函数，调用时应使用磁贴填充页面。瓦片上的数据是从远程数据库获取的(因此是 AJAX 请求)。我也在代码中使用 jQuery 3.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;
        }
    });
}

我不认为被注入(inject)的 HTML 是相关的，因为那部分工作正常。

问题是 fadeout 和 success 被调用的两个 each 循环，调出顺序不对。我试图记录每个执行的时间，这就是我得到的:

//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 个图 block ，因此评论 2 和 3 应该触发 6 次而 1 只触发一次。

• 为什么1不先执行？

• 为什么 1 被执行了 6 次？ 编辑: 我自己刚刚想到了那个。

• 如果1是最后执行的，为什么它不删除之前创建的所有瓦片？

另一个问题是它第一次显示 6 个图 block ，但第二次(及以后)只显示 5 个图 block (第一个不显示)。

谁能帮我解释一下这是怎么回事，我该如何避免这种行为？

谢谢。

Answer 1

Why doesn't 1 execute first and why is 1 executed 6 times?

来自 .fadeOut 的文档，第二个参数是“动画完成后调用的函数，每个匹配元素调用一次”。

因此在这种情况下，该函数将在约 100 毫秒(您作为第一个参数提供的延迟)后调用，并将调用六次(每个匹配元素一次)。

If 1 is executed last, why doesn't it delete all the tiles created before?

如上所示，1 在 100 毫秒后运行。但是，实际节点是在 1000 * index 毫秒之后添加的:

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

因此对于除了第一个节点之外的所有节点，实际附加节点的代码都在 1 之后运行。但是，对于第一个节点(注意:index of 0 => 1000 * 0 = 0ms delay)，appendTo 代码直接运行，这意味着它实际上会在 .empty() 时被删除在 100 毫秒后调用，这意味着您将只能看到 6 个节点中的 5 个。

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

$('.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 的用法，它会在所有元素完成动画后给我们一个回调，而不是每个元素一个回调。