JQuery Таймер обратного отсчета не считается, если страница закрыта

Question

У меня проблема с моим обратным отсчетом. Я могу хранить таймер в локальном хранилище, но если я закрыл страницу, таймер не подсчитывает, и если я снова открою страницу, снова начнется отсчет таймера. Как сделать таймер еще считая, когда я закрою страницу и снова открою ее. Я использую keith-wood countdown

Это мой код

$(function() { 
    var temporary=3600; 
    if (window.localStorage.getItem("detik")!=null) 
    { 
     temporary=window.localStorage.getItem("detik"); 
    } 
    else { 
     window.localStorage.setItem("detik",temporary); 
    } 
    $('#defaultCountdown').countdown(
     { 
      until:+temporary, 
      compact: true, 
      onExpiry: end, 
      onTick:function(e) 
      { 
       var detik=(e[4]*3600)+(e[5]*60)+e[6]; 
       window.localStorage.setItem("detik",detik); 
      }}); 
}); 

function end() { 
    alert('We have lift off!'); 
} 

Спасибо и Ура !!

Answer 1

Ну, вы не можете ожидать, что ваш javascript продолжит отсчет, когда ваша страница будет закрыта. Таким образом, вместо того, чтобы экономить секунды слева, вы должны сохранить метку времени, на котором таймер достигнет 0.

var reachZeroOn; 
if (window.localStorage.getItem("reachZeroOn") !== null) { 
    reachZeroOn = new Date(window.localStorage.getItem("reachZeroOn")); 
} else { 
    reachZeroOn = new Date((new Date).getTime() + 3600000); 
    window.localStorage.setItem("reachZeroOn", reachZeroOn); 
} 

$('#defaultCountdown').countdown({ 
    until: reachZeroOn, 
    compact: true, 
    onExpiry: end, 
}); 

function end() { 
    alert('We have lift off!'); 
} 

Рабочего пример: jsFiddle

Answer 2

Действительно, JavaScript разметки страницы не запускается, если вы закроете свой браузер, или перемещаться от него.

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

Вместо сохранения оставшегося количества секунд вы должны сохранить абсолютное время, в которое счетчик отсчитывает счет. Это значение не изменяется во время подсчета, поэтому не будет проблем, если вы покинете страницу и вернетесь к ней. Также не нужно обновлять localStorage при каждом тике.

Вот код:

// read previous deadline (unix time) or default to 
    // current time + 1 hour: 
    var deadline = +window.localStorage.getItem("detik") 
       || new Date().getTime() + 3600*1000; 
    // save this time: 
    window.localStorage.setItem("detik", deadline); 

    if (deadline < new Date().getTime()) { 
     // In case during the user's absence the timer already expired: 
     end(); 
    } else { 
     $('#defaultCountdown').countdown({ 
      until: new Date(deadline), 
      compact: true, 
      onExpiry: end, 
     }); 
    } 

Убедитесь, что сначала удалить запись LocalStorage вы, возможно, уже есть.