Что лучше использовать чтобы сделать задержку для отправки комментария?

Question

[gazes12]

Здравствуйте.
Хочу реализовать задержу при отправки комментария. Допустим, человек отправляет комментарий и следующий комментарий он сможет отправить через 60 секунд. Что использовать? Может быть одно из этого: setInterval, setTimeout, delay, thorttle, debounce или что?

Подскажите пожалуйста.

Comments

[Сергей Сергей]

метка времени в локальном хранилище.

[gazes12]

Сергей Сергей, Здравствуйте. Что я не так делаю?

localStorage.setItem('time', $.now());

sendButton.click((e) =>{
    e.preventDefault();
    
    let timer = setInterval(() =>{ 
        const start = localStorage.getItem('time');

        let calc = Math.round(Math.abs(start - $.now()) / 1000);
        if(calc > 5){
            addCommentFn();
        }else{
            commentsResults.html(`<div class="comments__result--error comments__result">${calc} + 'сек.'</div>`)
            smoothResult();
        }
    }, 1000);
});

Тут две проблемы:
Изначально разница между start и текущем временем 3-4 секунды.

commentsResults.html(`<div class="comments__result--error comments__result">${calc}</div>`) (тут сразу же с 3-4 секунды стартует).

Задержка работает и на первый комментарий.

Как решить данные проблемы? Буду рад за помощь!

[Сергей Сергей]

Метку перезаписывать после addCommentFn, при инициализации там должен быть ноль или прошлая метка с предыдущего посещения страницы. И делать now - start, текущее время обычно больше прошедшего, и округлять не обязательно, сравнение с 5000 сработает точнее.
А вообще это thorttle.

[gazes12]

Сергей Сергей, Скажите пожалуйста, почему переменная canClick не становится равной true, после выполнения условия?

let canClick = true;

sendButton.click((e) =>{
    e.preventDefault();
    if(canClick == true){
        canClick = false;
        localStorage.setItem('time', $.now());
        let timer = setInterval(canClick =>{ 
            const start = localStorage.getItem('time');
            let calc = $.now() - start;
            if(calc >= 5000){
                sendButton.removeClass('lock');
                clearInterval(timer);
                addCommentFn();
                canClick = true;
            }else{
                /* sendButton.addClass('lock'); */
                console.log(calc);
            }
        }, 1000, canClick);
    }else{
        commentsResults.html(`<div class="comments__result--error comments__result">Жди, а то бан!</div>`)
        smoothResult();
    }
});

[Сергей Сергей]

canClick локальная переменная, одноимённую глобальную из интервальной функции не достать.

[gazes12]

Сергей Сергей, Что тогда лучше всего использовать?

[Сергей Сергей]

убрать аргумент в интервальной функции.

Answer 1

[Дмитрий Беляев]

На клиенте просто делаем для кнопки:

button.disable = true;
setTimeout(() => {
  button.disable = false;
}, 60_000);

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

Comments

[nonconformiste]

ох и написал бы я расширение для хрома что бы заспамить коменты с такой защитой)) аж руки чешутся

Answer 2

[mayton2019]

Просто часы проверяй. Если минута не прошла - тогда заблокируй кнопку и скажи дескать - рано еще.

Comments

[gazes12]

mayton2019, Часы на устройстве или время отправки комментария?

[mayton2019]

gazes12, это на твоё усмотрение.