Как можно корректно реализовать данную задачу?

Question

[gazes12]

function stateSubmitBtn(){
        setInterval(function(){
            var errors = new Array();
            
            const nameValue = $('.input--name').val().trim();
            const surnameValue = $('.input--surname').val().trim();
            const messageValue = $('.input--message').val().trim();

            if(nameValue == '' || surnameValue == '' || messageValue == ''){
                errors += 'Заполните все поля!'
            }else if (/^[0-9 ]+$/.test(messageValue) || /^[0-9 ]+$/.test(surnameValue) || /^[0-9 ]+$/.test(nameValue)) {
                errors += 'В полях запрещено вводить только цифры!';
            } 


            if(errors.length == 0){
                $('.button').removeClass('lock');
                $('.results').html(`<div class="result result--succ">Все корректно!</div>`);
            }else{
                $('.button').addClass('lock');
                $('.results').html(`
                <div class="result result--error">${errors}</div>
                `);
            }
            
        }, 100);
    }

    stateSubmitBtn();

if(errors.length == 0){
                $('.button').removeClass('lock');
                $('.results').html(`<div class="result result--succ">Все корректно!</div>`);
            }else{
                $('.button').addClass('lock');
                $('.results').html(`
                <div class="result result--error">${errors}</div>
                `);
            }

Проблема в том, что эти условия выполняются каждые 100 мс.
И если я хочу в result вывести результат извне, то он появляется на 100 мс, так как тут продолжает идти проверка и очищать блок с результатами. Как это можно реализовать по другому, чтобы все работало корректно? Буду рад за помощь!

Comments

[ForSureN1]

а зачем вам сетинтервал?

[gazes12]

ForSureN1, Чтобы каждые 100 мс проверялись значения полей.

[ForSureN1]

gazes12, если вы хотели реализовать технику debounce, то вы ее сделали немного неправильно, при вводе в инпут, должна запускаться функция, которая проверяет корректность полей, и собственно обвернуть эту ф-цию в setTimeOut, и задать время, при котором если юзер перестал тыкать на клавиши, то ф-ция выполнится, но если время не закончилось, и мы продолжаем вводить данные, то этот setTimeOut должен каждый раз обнуляться

Answer 1

[Stalker_RED]

Слушайте события input, change, paste.
А таймер не нужен.