Javascript 使用Firebase Listener浏览器更新数据表

我们正在使用firebase Listener进行更新UI。数据库结构如下：

我们正在使用mailgun批量发送发送广播，因此一个广播可能有n个联系人（电子邮件），它可能有300个或1000个联系人，并且我们正在跟踪它的传递或读取或单击状态，因此每个联系人（电子邮件）将在firebase数据库中更新状态（使用firebase云功能）从邮枪回拨并更新其状态、日期和时间。它将更新firebase数据库，所以这里我们将使用firebase侦听器获得更新广播的通知

现在，如果选择了广播，我们将更新dataTable，而更新浏览器时将挂起，因为我们可能会收到来自mailGun的100或300次回调（取决于mailGun回调，他们一次将发送多少次回调）。对于用户界面，请查看下图

更新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
        }
    }

注：我们需要对表格进行排序，在绘制表格后进行搜索。 在更新和重画数据表时，它是挂起的页面，因为我们可能会收到来自邮枪的100或300次回调