Таймер обратного отсчета связанный с формой данных?

Question

[Валентин Попов]

Ребята, подскажите есть ли готовый скрипт для реализации таймера обратного отсчёта в связке с формой. Что я имею ввиду?
Допустим пользователь заходит на сайт и начинается таймер обратного отсчёта. Если пользователь успел заполнить форму, то на почту приходят данные что пользователь успел заполнить форму в отведённое время и ему положена скидка, а если не успел за отведённое время, то приходит на почту что нет ему скидки.
Я так понимаю это надо как то сравнивать время на сервере и куки, но я не могу понять как это реализовать. Буду очень благодарен если кто поделится ссылкой на готовую реализацию такого скрипта.

Comments

[RMate]

Всё проще, делаешь глобальную переменную "uspel = true", делаешь setTimeout(function(){uspel=false}, время_в_милисекундах) и при отправке формы отправляешь ещё и переменную uspel.

[riot26]

RMate, руки отрублю за транслит в коде -_-

[Павел Корнилов]

А точка отсчёта? Конкретная дата/время или момент захода на сайт?
А если страницу перезагрузит?

[RMate]

riot26, извиняйте, не все на этом форуме знают английский, и когда пишешь нормальные названия переменных - возникают дополнительные вопросы. Или предлагаете узнавать у человека, шпрехен ли он, а потом только варианты накидывать?)

[RMate]

Валентин Попов, А знать бы каким методом у вас вообще реализована отправка форм

[Валентин Попов]

RMate, через Ajax. Мне просто надо логику понять как сравнить время на сервере и куки пользователя. Ваш вариант при перезагрузки страницы не сработает. У пользователя опять начнётся таймер. А надо чтобы он если упустил шанс, то пока куки его не истечёт у него таймер не заработает

[Валентин Попов]

Павел Корнилов, ну например таймер на 5 минут. Если он не успел оформить за пять минут форму, то при следующем заходе у него не начнётся таймер пока не истечёт срок годности его куки. Я вот и пытаюсь узнать, как такое реализовать

[Павел Корнилов]

Валентин Попов, тогда стоит разделить котлеты и мух.
Таймер поставить самый обычный на веб-морде, любой. А при заходе пользователя писать ему кукис с жизнью 5 минут. А при отправке формы - проверять -жив ли кукис.
Тогда и перезагрузки не страшны, и реализация будет самая примитивная, в 1 проверку.
Думаю, мало кто додумается успеть за эти 5 минут кукис подменить на более живучий.

[Михаил]

В LocalStorage можно писать информацию о первом заходе на страницу и потом сверяться с ней

[RMate]

Валентин Попов, Не надо вообще сравнивать время сервера, вы делаете акцию на сайт, верно? таки защиты на стороне клиента здесь с головой хватит, ибо ничего не мешает человеку просто открыть браузер в режиме инкогнито, и быть для вашего сайта уже новым пользователем.

По основному вопросу - вы делаете переменную с признаком успел ли пользователь, давайте назовём её timely, чтобы не задевать транслитом нежные глаза пользователей)

В момент загрузки проверяете кукисы (опять же не знаю, используете вы библиотеку для работы с куки, или работаете напрямую), и если кукис не установлен - даете переменной признак true. иначе - false.

После чего ставите интервал на ожидание функцией

setInterval(function()
{
  // тут вы устанавливаете значения:
  // timely = false
  // тут вы устанавливаете куки, говорящие, что шанс упущен.
}, <b>здесь_интервал_через_какое_время_истекает_шанс</b>)

И в принципе, профит. Остается взять какой-нибудь симпатичный таймер обратного отсчета, и настроить на время, сейчас + здесь_интервал_через_какое_время_истекает_шанс

PS: самое важное то и забыл. и добавляете при отправке вашего ajax-запроса в данные ещё и переменную timely

Answer 1

[nvdfxx]

В sessionStorage хранить не вариант?

let time = sessionStorage.getItem('time') ? sessionStorage.getItem('time') : 0 // после перезагрузки будет браться уже истраченное время или 0
let checkpoint = true

setInterval({
    if(time < 300) {
        time++
        sessionStorage.setItem('time', time) // каждую секунду записываем в сессию, чтобы знать истраченное время после перезагрузки
    } else {
        clearInterval(time);
        checkpoint = false
    }
}, 1000)

при отправке формы просто checkpoint проверяете

Comments

[RMate]

Зачем использовать интервал там, где прекрасно справляется таймаут?

[nvdfxx]

RMate, я вроде написал зачем, даже прокомментировал код, как вы таймаутом оставшееся время сохраните после перезагрузки?