5

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

2
  • Вот вам аналогичные вопрос/ответы
    – Visman
    6 июл 2017 в 17:05
  • Я бы сделал это с помощью cookie. Если вкратце: берете любой плагин плагин, например, jQuery Simple Timer. Проверяете куки. Если значения в куки нет, запускаете таймер с коллбэком onComplete:, в котором прописываете свой ajax запрос, и создаете куки
    – Cheg
    6 июл 2017 в 17:40

2 ответа 2

2

Есть множество плагинов для обратного отсчёта для 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
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/countdown/master/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/countdown/master/dist/js/jquery.countdown.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/kbwood/countdown/master/dist/css/jquery.countdown.css">

<H2>Новый год скоро!</H2>
<span id="countdown-example"></span>

0

Я думаю можно сделать так. В сервере при загрузке страницы задать вот такой параметр js let session_timer = '<?php echo $_SESSION["session_timer"]; ?>';.

Когда все в первый раз в сервере задаем например <?php $_SESSION["session_timer"] = false; ?>.

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 запроса
}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.