Блог

Главная - Вопросы по программированию - Обратный отсчет останавливается, когда пользователь выходит из текущей вкладки

Обратный отсчет останавливается, когда пользователь выходит из текущей вкладки

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я создаю простой обратный отсчет с индикатором выполнения «инвертировать» — для управления сеансом на моем веб-сайте.

по истечении времени страница будет перезагружена и без блокировки сеанса.

ПРОБЛЕМА: индикатор выполнения работает нормально, но ЕСЛИ пользователь меняет окно или текущую вкладку — и «забыл» открыть страницу — обратный отсчет останавливается. Я не знаю, почему

КОД:

 function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(30, 30, $('#progressBar'));  
 #progressBar {
  width: 90%;
  margin: 10px auto;
  height: 2px;
  background-color: #E0E0E0;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 0px;
  line-height: 2px;
  width: 0;
  background-color: #FF0000;
  box-sizing: border-box;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>

JSFIDDLE:https://jsfiddle.net/2tonbd5k

Есть идея решить это?

Я думаю, мне нужно изменить фиксированное значение «timeleft или timetotal» ( 3 минуты) на «реальное время» (пользователь заходит на сайт в 21: 57: 00, тогда «реальное время» для перезагрузки составит 3 минуты — 22:00: 00 вечера). Если пользователь выйдет, анимация тоже остановится, но когда он вернется, js скорректируется до реального времени. Я могу обновить «время» с помощью ASP — но как я могу это сделать?

** для целей тестирования временной интервал в коде составляет всего 30 секунд.

Комментарии:

1. Вы захотите запустить свое время на основе localStorage.timeStamp = Date.now(); . Конечно, видя, что вы пытаетесь создать индикатор выполнения, почему вы не используете xhr.onprogress событие?

2. Браузеры будут подавлять повторяющиеся операции таймера в неактивных окнах для экономии процессора, памяти и т. Д

3. т. е. время начала записи с помощью start = Date.now() (нет необходимости в объекте Date как таковом — также нет необходимости хранить что-либо в localStorage, если вы не хотите сохранить это время при загрузке страницы) — затем вычислите оставшееся время с помощью Date.now() - start

4. @JaromandaX хорошая идея — но как таймер узнает, что его нужно остановить через 3 минуты?

5. таймер продолжается, пока Date.now() - start < 180000

Ответ №1:

все, что вам нужно, это добавить этот скрипт

 if ( document.hidden ) { return; }

результат здесь
https://jsfiddle.net/mfkLea7w /