библиотека jQuery цикла foreach принимает много времени, чтобы добавить HTML-код


библиотека jQuery цикла foreach принимает много времени, чтобы добавить HTML-код

28.10.2020 08:21:45 Просмотров 60 Источник

Я добавляю около пяти тысяч записей с помощью цикла jquery foreach, но иногда это занимает много времени и приводит к сбою браузера.

        $.each(data, function(index, consignment) {
            
           
           if(consignment.delivery_runs !== null){
              var delivery_run_name = consignment.delivery_runs.name;
           }else{
               var delivery_run_name = '';
           }
           if(consignment.delivery_addresses != null){
               var delivery_name = consignment.delivery_addresses.company_name;
               var delivery_suburb = consignment.delivery_addresses.suburb;
               var delivery_postcode = consignment.delivery_addresses.postcode;
           }else{
            var delivery_name = '';
               var delivery_suburb = '';
               var delivery_postcode = '';
           }
           if(consignment.customers != null){
               var customer_name = consignment.customers.name;

           }else{
               var customer_name = '';
           }
           
        $('#consignment_table > tbody').append(`<tr class="consignment-row"><td><label class="kt-checkbox kt-checkbox--single kt-checkbox--solid">
                <input  type="checkbox"  class="kt-checkable check_con" name="check_consignment" data-id="${consignment.id}"  value="${consignment.id}">
                <span></span>
                </label></td><td>${consignment.id}</td><td>${$.trim(customer_name)}</td><td>${consignment.customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td>${consignment.carton}</td><td>${consignment.pallet}</td><td>${consignment.space}</td><td>${consignment.weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${consignment.status}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment.delivery_date))}</td><td>${$.trim(getFormattedDate(consignment.required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment.consignment_type}</td><td>${$.trim(consignment.product_types.name)}</td><td><a href="/consignments/show/${consignment.id}">View</a></td></tr>`);
    });

Как я могу улучшить этот код.

У вопроса есть решение - Посмотреть?

Ответы - библиотека jQuery цикла foreach принимает много времени, чтобы добавить HTML-код / jquery foreach loop taking long time to append html

Brockify

28.10.2020 08:23:37

Сделайте цикл for вместо взгляда foreach. Для каждого цикла они менее оптимизированы из-за того, что они более новые.

Является ответом!
Jaromanda X

28.10.2020 08:26:57

используйте data.map для создания одного большого HTML - кода-и добавьте его один раз

вот так

$('#consignment_table > tbody').append(Object.values(data).map(consignment => 
{
    let result = '';
    //
    // build up the return string here using whatever logic you need
    //
    return result;
}));

Вы можете поместить любую логику для построения отдельных строк там, где указано

вот ваш код

$('#consignment_table > tbody').append(data.map(
    consignment => {
        let delivery_run_name = '';
        let delivery_name = '';
        let delivery_suburb = '';
        let delivery_postcode = '';
        let customer_name = '';

        if (consignment.delivery_runs !== null) {
            delivery_run_name = consignment.delivery_runs.name;
        }
        if (consignment.delivery_addresses != null) {
            delivery_name = consignment.delivery_addresses.company_name;
            delivery_suburb = consignment.delivery_addresses.suburb;
            delivery_postcode = consignment.delivery_addresses.postcode;
        }
        if (consignment.customers != null) {
            customer_name = consignment.customers.name;
        }

        return `<tr class="consignment-row"><td><label class="kt-checkbox kt-checkbox--single kt-checkbox--solid">
            <input  type="checkbox"  class="kt-checkable check_con" name="check_consignment" data-id="${consignment.id}"  value="${consignment.id}">
            <span></span>
            </label></td><td>${consignment.id}</td><td>${$.trim(customer_name)}</td><td>${consignment.customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td>${consignment.carton}</td><td>${consignment.pallet}</td><td>${consignment.space}</td><td>${consignment.weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${consignment.status}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment.delivery_date))}</td><td>${$.trim(getFormattedDate(consignment.required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment.consignment_type}</td><td>${$.trim(consignment.product_types.name)}</td><td><a href="/consignments/show/${consignment.id}">View</a></td></tr>`;        
    }
));

Я уладил еще пару проблем ... объявление var для одной и той же переменной несколько раз ... он работает, но плохо выглядит код

кроме того, нет необходимости в if/else .. просто задайте значение пусто, то просто сделать, если

Возможно, для лучшей производительности ...

document.querySelector('#consignment_table > tbody').append(data.map(... same code as .map above ...).join(''))

т. е. естественный способ дом

Помочь в развитии проекта:
Закрыть X