javascript - 在加载子行时显示进度

Question

带着另一个问题再来:)

这次我需要在加载子行时显示一些进度。由于有一个 Api 调用相对需要很少的时间来返回数据，我确实想显示一些进度，除非单击父行的用户完全不知道是否完成了查看其子行的调用。

我做了什么:

我写了一个样式表类，它有一个

loader-small.gif

图片如下:

tr.loading td.details-control {
    background: url('/Images/loader-small.gif') no-repeat center center;
}

并像这样应用:

$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        try {
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                //Calling the loading Class ------>
                tr.addClass('loading');

                // Open this row
                var arrForTable1 = [];
                var arrForTable2 = [];

                totalBrokerage = 0;
                totalRetailBrokerage = 0;
                totalSelfServiceBrokerage = 0;

                console.log('You selected: ' + row.data().AccountManagerID);

                var settings = {
                    "columnDefs": [
                    { targets: 1, align: "right", decimals: 0 },
                    { targets: 2, align: "right", decimals: 0 },
                    { targets: 3, align: "right", decimals: 0 },
                    { targets: 4, align: "right", decimals: 2 },
                    { targets: 5, align: "right", decimals: 2 }
                    ]
                };

                //problems with asynchoronus call back
                var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);

                if (response.success === "true") {
                    for (var i = 0; i < response.value.length; i++) {

                        for (var j = 0; j < response.value[i].Securities.length; j++) {

                            var itemRow2 = {};
                            itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
                            itemRow2["Trades"] = response.value[i].Securities[j].Trades;
                            itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
                            itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
                            itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
                            itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
                            arrForTable2.push(itemRow2);

                            totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
                            totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
                        }

                        totalBrokerage = Math.round(totalBrokerage * 100) / 100;
                        totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
                        totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;



                        var itemRow1 = {};
                        itemRow1["Account ID"] = response.value[i].AccountId;
                        itemRow1["Account Name"] = response.value[i].AccountName;
                        itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
                        arrForTable1.push(itemRow1);
                        arrForTable2 = [];

                        totalBrokerage = 0;
                        totalRetailBrokerage = 0;
                        totalSelfServiceBrokerage = 0;

                    }

                    tr.removeClass('loading');
                    htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
                    row.child(htmlTable1).show();
                    tr.addClass('shown');
                }
                else {
                    row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
                    tr.addClass('shown');
                };
            }
        } catch (e) {
            console.log(e.message);
        }

    });

问题:

Firefox 在用户单击后很好地显示进度图像，但 Edge 和 Chrome 不显示。当我从各自浏览器的开发者工具进行调试时，两种浏览器都遇到了这段代码。

它的浏览器兼容问题？有解决办法吗？请帮助我。

Answer 1

在 chrome 的情况下，在进行服务器调用时显示加载栏时会出现这样的问题。请在您调用服务电话的地方进行以下更改。先在表中添加类加载

tr.addClass('loading');

之后通过给定超时函数进行服务调用

setTimeout(function(){
     var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
     ......
    //Your service calls and response call backs
},1);

在提供超时(例如 1 毫秒)时，Chrome 将有时间将加载栏绑定(bind)到 DOM，在其他情况下，DOM 对象不可用于显示微调器。