Debounce
Обработка массива с использованием данных из текстового поля не имеет смысла пока значение поля изменяется.
Нужно запускать обработчик после завершения ввода. На практике, с небольшой задержкой которую вы можете подобрать индивидуально. Гуглится елементарно.
пример для илюстрации
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId); // повторый вызов отменит предыдущий
timeoutId = window.setTimeout(() => {
callback(...args);
}, wait); // и запустит новый
};
}
const runDebouncedBigArrayOnInputEnds = debounce(
(event) => {
// запускает обработку большого массива в цикле
},
250 // сколько ждать завершения ввода
);
document.getElementById('#myTxtField').addEventListener('input', runDebouncedBigArrayOnInputEnds );
