библиотека jQuery цикла foreach принимает много времени, чтобы добавить HTML-код
Я добавляю около пяти тысяч записей с помощью цикла 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
Является ответом!
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(''))
т. е. естественный способ дом
Помочь в развитии проекта: