Оптимизируйте это JS Code Come Comement Sulderer для быстрого ответа ⇐ Javascript

[Anonymous]

Как вы оптимизируете код JavaScript для быстрого ответа ... Код работает совершенно хорошо, но проблема заключается в том, что флажки имеют задержку при щелчке из -за большого количества данных в базе данных ... < /p>
В журналах это написано: < /p>

[нарушение]. /> Убедитесь, что логика остается прежней .. < /p>
JS Code: оптимизируйте этот код < /p>
// Checkbox "change" listener
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox) =>
checkbox.addEventListener("change", (event) => {

const type = event.target.getAttribute("data-column");
const value = event.target.value;
state[type] = event.target.checked ? value : null;

const isAnySelected = Object.values(state).some((val) => val !== null);

manufacturerCheckboxes.forEach((checkbox) => {
const families = ic_family_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(({ ic_family }) => ic_family);
const crypartNumbers = cry_part_num_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(({ field_cry_part_num }) => field_cry_part_num);
const dimensions = cry_dimensions_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(({ field_cry_dimensions }) => field_cry_dimensions);
const frequencies = cry_freq_mhz_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(({ field_cry_freq_mhz }) => field_cry_freq_mhz);
const load_capacitances = cry_load_capacitance_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(
({ field_cry_load_capacitance }) => field_cry_load_capacitance
);
const aecs = cry_aec_arr
.filter(({ ic_manufacturer }) => ic_manufacturer === checkbox.value)
.map(({ field_cry_aec }) => field_cry_aec);
const hasManufacturer =
state.manufacturer && state.manufacturer !== checkbox.value;
const hasSelectedUnrelatedFamily =
state.family && !families.includes(state.family);
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypartNumbers.includes(state.crystal_part_num);
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasManufacturer ||
hasSelectedUnrelatedFamily ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedLoadCapacitance ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

familyCheckboxes.forEach((checkbox) => {
const manufacturer = ic_family_arr.find(
({ ic_family }) => ic_family === checkbox.value
).ic_manufacturer;
const crypartNumbers = cry_part_num_arr
.filter(({ ic_family }) => ic_family === checkbox.value)
.map(({ field_cry_part_num }) => field_cry_part_num);
const dimensions = cry_dimensions_arr
.filter(({ ic_family }) => ic_family === checkbox.value)
.map(({ field_cry_dimensions }) => field_cry_dimensions);
const frequencies = cry_freq_mhz_arr
.filter(({ ic_family }) => ic_family === checkbox.value)
.map(({ field_cry_freq_mhz }) => field_cry_freq_mhz);
const load_capacitances = cry_load_capacitance_arr
.filter(({ ic_family }) => ic_family === checkbox.value)
.map(
({ field_cry_load_capacitance }) => field_cry_load_capacitance
);
const aecs = cry_aec_arr
.filter(({ ic_family }) => ic_family === checkbox.value)
.map(({ field_cry_aec }) => field_cry_aec);
const hasFamily = state.family && state.family !== checkbox.value;
const hasSelectedUnrelatedManufacturer =
state.manufacturer && state.manufacturer !== manufacturer;
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypartNumbers.includes(state.crystal_part_num);
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasFamily ||
hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedLoadCapacitance ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

crypartnumCheckboxes.forEach((checkbox) => {
const cry_part_num = cry_part_num_arr.find(
({ field_cry_part_num }) => field_cry_part_num === checkbox.value
);
const manufacturer = cry_part_num.ic_manufacturer;
const family = cry_part_num.ic_family;
const dimensions = cry_dimensions_arr
.filter(
({ field_cry_part_num }) => field_cry_part_num === checkbox.value
)
.map(({ field_cry_dimensions }) => field_cry_dimensions);
const frequencies = cry_freq_mhz_arr
.filter(
({ field_cry_part_num }) => field_cry_part_num === checkbox.value
)
.map(({ field_cry_freq_mhz }) => field_cry_freq_mhz);
const load_capacitances = cry_load_capacitance_arr
.filter(
({ field_cry_part_num }) => field_cry_part_num === checkbox.value
)
.map(
({ field_cry_load_capacitance }) => field_cry_load_capacitance
);
const aecs = cry_aec_arr
.filter(
({ field_cry_part_num }) => field_cry_part_num === checkbox.value
)
.map(({ field_cry_aec }) => field_cry_aec);
const hasSelectedUnrelatedManufacturer =
state.manufacturer && state.manufacturer !== manufacturer;
const hasSelectedUnrelatedFamily =
state.family && state.family !== family;
const hasCrypartNumber =
state.crystal_part_num && state.crystal_part_num !== checkbox.value;
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedFamily ||
hasCrypartNumber ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedLoadCapacitance ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

dimensionsCheckboxes.forEach((checkbox) => {
const dimensions = cry_dimensions_arr.filter(
({ field_cry_dimensions }) =>
field_cry_dimensions === checkbox.value
);
const manufacturers = [],
families = [],
crypart_nums = [];
dimensions.forEach((dimension) => {
manufacturers.push(dimension.ic_manufacturer);
families.push(dimension.ic_family);
crypart_nums.push(dimension.field_cry_part_num);
});
const frequencies = cry_freq_mhz_arr
.filter(
({ field_cry_dimensions }) =>
field_cry_dimensions === checkbox.value
)
.map(({ field_cry_freq_mhz }) => field_cry_freq_mhz);
const load_capacitances = cry_load_capacitance_arr
.filter(
({ field_cry_dimensions }) =>
field_cry_dimensions === checkbox.value
)
.map(
({ field_cry_load_capacitance }) => field_cry_load_capacitance
);
const aecs = cry_aec_arr
.filter(
({ field_cry_dimensions }) =>
field_cry_dimensions === checkbox.value
)
.map(({ field_cry_aec }) => field_cry_aec);
const hasDimension =
state.dimensions && state.dimensions !== checkbox.value;
const hasSelectedUnrelatedManufacturer =
state.manufacturer && !manufacturers.includes(state.manufacturer);
const hasSelectedUnrelatedFamily =
state.family && !families.includes(state.family);
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypart_nums.includes(state.crystal_part_num);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasDimension ||
hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedFamily ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedLoadCapacitance ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

frequencyCheckboxes.forEach((checkbox) => {
const frequencies = cry_freq_mhz_arr.filter(
({ field_cry_freq_mhz }) => field_cry_freq_mhz === checkbox.value
);
const manufacturers = [],
families = [],
crypart_nums = [],
dimensions = [];
frequencies.forEach((frequency) => {
manufacturers.push(frequency.ic_manufacturer);
families.push(frequency.ic_family);
crypart_nums.push(frequency.field_cry_part_num);
dimensions.push(frequency.field_cry_dimensions);
});
const load_capacitances = cry_load_capacitance_arr
.filter(
({ field_cry_freq_mhz }) => field_cry_freq_mhz === checkbox.value
)
.map(
({ field_cry_load_capacitance }) => field_cry_load_capacitance
);
const aecs = cry_aec_arr
.filter(
({ field_cry_freq_mhz }) => field_cry_freq_mhz === checkbox.value
)
.map(({ field_cry_aec }) => field_cry_aec);
const hasFrequency =
state.frequency && state.frequency !== checkbox.value;
const hasSelectedUnrelatedManufacturer =
state.manufacturer && !manufacturers.includes(state.manufacturer);
const hasSelectedUnrelatedFamily =
state.family && !families.includes(state.family);
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypart_nums.includes(state.crystal_part_num);
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasFrequency ||
hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedFamily ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedLoadCapacitance ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

load_capacitanceCheckboxes.forEach((checkbox) => {
const load_capacitances = cry_load_capacitance_arr.filter(
({ field_cry_load_capacitance }) =>
field_cry_load_capacitance === checkbox.value
);
const manufacturers = [],
families = [],
crypart_nums = [],
dimensions = [],
frequencies = [];
load_capacitances.forEach((load_capacitance) => {
manufacturers.push(load_capacitance.ic_manufacturer);
families.push(load_capacitance.ic_family);
crypart_nums.push(load_capacitance.field_cry_part_num);
dimensions.push(load_capacitance.field_cry_dimensions);
frequencies.push(load_capacitance.field_cry_freq_mhz);
});
const aecs = cry_aec_arr
.filter(
({ field_cry_load_capacitance }) =>
field_cry_load_capacitance === checkbox.value
)
.map(({ field_cry_aec }) => field_cry_aec);
const hasLoadCapacitance =
state.load_capacitance && state.load_capacitance !== checkbox.value;
const hasSelectedUnrelatedManufacturer =
state.manufacturer && !manufacturers.includes(state.manufacturer);
const hasSelectedUnrelatedFamily =
state.family && !families.includes(state.family);
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypart_nums.includes(state.crystal_part_num);
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedAec =
state.aec && !aecs.includes(state.aec);
const shouldHide =
isAnySelected &&
(hasLoadCapacitance ||
hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedFamily ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedAec);

toggleCheckbox(checkbox, shouldHide);
});

aecCheckboxes.forEach((checkbox) => {
const aecs = cry_aec_arr.filter(
({ field_cry_aec }) => field_cry_aec === checkbox.value
);
const manufacturers = [],
families = [],
crypart_nums = [],
dimensions = [],
frequencies = [],
load_capacitances = [];
aecs.forEach((aec) => {
manufacturers.push(aec.ic_manufacturer);
families.push(aec.ic_family);
crypart_nums.push(aec.field_cry_part_num);
dimensions.push(aec.field_cry_dimensions);
frequencies.push(aec.field_cry_freq_mhz);
load_capacitances.push(aec.field_cry_load_capacitance);
});
const hasAec = state.aec && state.aec !== checkbox.value;
const hasSelectedUnrelatedManufacturer =
state.manufacturer && !manufacturers.includes(state.manufacturer);
const hasSelectedUnrelatedFamily =
state.family && !families.includes(state.family);
const hasSelectedUnrelatedCrypartNum =
state.crystal_part_num &&
!crypart_nums.includes(state.crystal_part_num);
const hasSelectedUnrelatedDimension =
state.dimensions && !dimensions.includes(state.dimensions);
const hasSelectedUnrelatedFrequency =
state.frequency && !frequencies.includes(state.frequency);
const hasSelectedUnrelatedLoadCapacitance =
state.load_capacitance &&
!load_capacitances.includes(state.load_capacitance);
const shouldHide =
isAnySelected &&
(hasAec ||
hasSelectedUnrelatedManufacturer ||
hasSelectedUnrelatedFamily ||
hasSelectedUnrelatedCrypartNum ||
hasSelectedUnrelatedDimension ||
hasSelectedUnrelatedFrequency ||
hasSelectedUnrelatedLoadCapacitance);

toggleCheckbox(checkbox, shouldHide);
});
})
);
< /code>
Пример HTML -контейнер: я не мог вставить длинный код из -за ограниченного текста в корпусе. < /p>





{{ 'Frequency(MHz)'|t }}

• {% for cry_freq_mhz in cry_freq_mhz_arr_no_duplicate %}
• 
  
  
  {{ cry_freq_mhz.field_cry_freq_mhz }}
  
  
  
  {% endfor %}

Подробнее здесь: https://stackoverflow.com/questions/795 ... t-response