使用Firebase侦听器挂起浏览器更新数据表

Question

我们使用firebase Listener进行更新UI,数据库结构如下:

我们使用mailgun批量发送发送广播,因此一个广播可能有n个联系人(电子邮件),它可能有300个或可能有1000个联系人以及我们正在跟踪它的传递或读取或点击状态,因此每个联系人(电子邮件)将从mailgun回调中获取firebase数据库中的更新状态(使用firebase云功能)并更新它的状态和日期和时间.它将更新firebase数据库,因此我们将在此处获取使用firebase侦听器更新广播的通知.

现在我们正在更新dataTable,如果选择了广播,并且更新浏览器将要挂起,因为我们当时可以从mailGun获得100或300回调(取决于mailgun回调,他们将一次发送多少回调).对于UI,请检查下面的图像.

更新dataTable浏览器时会挂起并且没有响应.

我们使用下面的代码:

var broadcastRef = firebase.database().ref("businessListings/" + listingId + "/broadcast");
broadcastRef.on('child_changed', function(broadcastSnapshot) {//it will call multiple time because when we received callback from mailgun at that time database will be update and we will received notification in Listener , it will get notification may be 100 or 300 at a time depends firebase database update from the mailgun.
        if (broadcastSnapshot.exists()) {
            var broadcastKey  = broadcastSnapshot.key;
            var broadcastResult = broadcastSnapshot.val();
            var activeMainTab = $('#mainTabBar li').find('a.active').html();
            allBroadCast[broadcastKey] = broadcastResult ;
            if(selectedBroadcast == broadcastKey){ // It's true when we have selected broadcast updating status.
                updateCounts(broadcastKey);  // Updating dataTable and drawing again dataTable, it will call multiple time because when we received the callback from mailgun at that time database will be updated and we will receive notification in Listener, it will get notification maybe 100 or 300 at a time depends on mailgun.
            }
        }
    });

function updateCounts(broadcastId){
        if(broadcastId in allBroadCast){
            var boradcastDetail = allBroadCast[broadcastId];   //allBroadcast is local array which have all  the broadcast.
            var contacts = boradcastDetail['contacts'];
            var table = $('.broadcast_table').DataTable(); // Initalize data table
            $.map(contacts,function(contact){
                var number = (contact.number == "" || contact.number === undefined) ? "" : contact.number.toString(); //Each number we are assing as a Id for identifying row and updating the row
                var errors = ('error' in contact) ? contact.error : "";
                var deliveryStatus = ('deliveryStatus' in contact) ? contact.deliveryStatus : 'Unknown';  // Getting updated status
                var deliveryTimeStamp = ('deliveryTimeStamp' in contact) ? contact.deliveryTimeStamp : ""; // Getting updated TimeStamp
                var deliveryDateTime = (deliveryTimeStamp != "") ? moment.unix(deliveryTimeStamp).format("MMMM DD, YYYY hh:mm A") : "-";
                var clickCount = ('clickCount' in contact) ? contact.clickCount : 0; // Getting updated Clicked Count
                var readCount = ('readCount' in contact) ? contact.readCount : 0; // Getting updated Read Count


        //Each number (#abc@g.com_Status or #abc@g.com_deliveryDateTime) we are asking as an Id for identifying row and updating the row
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status').html(deliveryStatus);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime').html(deliveryDateTime);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount').html(readCount);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount').html(clickCount);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error').html(errors);

                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status')).invalidate(); // Updating cell for status
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status').attr('data-order', deliveryStatus)).invalidate(); // Updating cell for status
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime')).invalidate(); // Updating cell for deliveryDateTime
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime').attr('data-order', deliveryDateTime)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount')).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount').attr('data-order', readCount)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount')).invalidate(); // Updating cell for Click count
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount').attr('data-order', clickCount)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error')).invalidate(); // Updating cell for Error if any
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error').attr('data-order', errors)).invalidate(); // Updating cell for Error if any
            });
            table.draw();  // Drawing table
        }
    }

注意:我们需要对表格进行排序,在绘制表格后进行搜索.更新和重绘dataTable时挂起页面因为我们当时可以从mailGun获得100或300个回调.