Нужен таймер обратного отсчета на js

#php #javascript #jquery #html5 #laravel

Сюда обратился, потому что в гугле не нашел толкового ответа. Там при запросе таймер
js, черт ногу сломит! 
В общем, помогите найти или поделитесь своим таймером.
Нужен таймер на JS, чтобы время задавалось в ручную: 30 минут, 1 день, 1 неделя и
1 месяц. (Таймер не должен начинаться заново после обновления страницы).
После того как время вышло, нужно с помощью ajax отправить post запрос на указанный
роут (laravel) что таймер закончился.
    

Ответы

Ответ 1

Есть множество плагинов для обратного отсчёта для jQuery. Например https://github.com/kbwood/countdown
позволяет делать обратный отсчёт в любых форматах - есть множество примеров . 

Cамый популярный плагин обратного отсчёта - этот http://hilios.github.io/jQuery.countdown/
- также примеров множество. 



jQuery(function($) {
  $('#countdown-example').countdown({
    until: new Date((new Date()).getFullYear() + 1, 1 - 1, 1),
    onExpiry: function(){ alert('Ура, новый год!!!'); /*Тут ваш POST запрос*/ },
    padZeroes: true
  });
});





Новый год скоро!



Ответ 2

Я думаю можно сделать так. В сервере при загрузке страницы задать вот такой параметр
js let session_timer = '';.

Когда все в первый раз в сервере задаем например .



if(!session_timer){
  let ajax_timer = 30*60;
  //(пример 30минут) здесь расчет времени

  let session_timer = Math.floor(new Date() / 1000) + ajax_timer;
  //в это время должен происходить `ajax` запрос.
  
  send_ajax_timer_to_server();
  
}

function send_ajax_timer_to_server(){
    //здесь другой ajax запросом вы должны отправить таймер в сервер и там сахранить
его в сессии.
}




Потом в фронте когда задаешь время (30м, 1д и т.д.) если session_timer ровно false.
Потом когда задали время или таймер из сессии уже установлен уже можно написать логику
к примеру вот так.

Допустим мы задали время 30 минут и потом закрыли страницу, а потом открыли к примеру
после 10 минут, сейчас мы должны рассчитать сколько времени прошло с момента установки
времени.



let timeout_timer = Math.floor(new Date() / 1000) - session_timer;

if(timeout_timer > 0){
  setTimeout(ajax_timer_func, timeout_timer*1000);
}
else{
  //когда открыли страницу позже то сразу запускаем функцию для ajax запроса
  ajax_timer_func();
}

function ajax_timer_func(){
  //здесь код вашего ajax запроса
}




Я бы сделал так, если есть недостатки можете написать в комментариях.