Обновление таблицы данных с помощью зависшего браузера Firebase Listener

Question

Мы используем Firebase Listener для обновления интерфейса, структура базы данных ниже:

мы отправляем широковещательную рассылку, используя пакетную отправку почтовой пушки, поэтому в одной широковещательной рассылке может быть n контактов (электронных писем), может быть 300 или 1000 контактов, а мы отслеживаем его доставку или статус чтения или клика, поэтому каждый контакт ( электронная почта) будет обновлять статус в базе данных firebase (используя облачную функцию firebase) от перезвона почтового пистолета и обновлять его статус, дату и время. и он будет обновлять базу данных firebase, поэтому здесь мы получим уведомление об обновленной трансляции с использованием прослушивателей firebase.

Теперь мы обновляем dataTable, если выбрана широковещательная рассылка, и во время обновления браузер будет зависать, потому что мы получим, возможно, 100 или 300 обратных вызовов от mailGun за один раз (зависит от обратного вызова 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
        }
    }

Примечание: нам нужна сортировка таблицы, поиск по чертежной таблице. он зависает при обновлении и перерисовке dataTable, потому что мы можем получить от 100 до 300 обратных вызовов от mailGun.