Question

那么，

我有倒数计时器，我遇到以下问题：

我的倒计时从90秒开始。例如，如果用户等到它达到2秒，那么他会使用浏览器的按钮返回并且在前进（支持到同一页面）后，倒计时在90秒重新开始，而不是在我需要的2时，因为当计时器达到0我在发布表格的按钮上“点击”。

我知道我需要处理后退和前进按钮并使用新值设置我的变量，但我不知道我该怎么做。任何帮助都会很棒。

我的代码如下：

var count = 90;
var screenCount = count;
var newCount = 0;
function countFunction() {

    if (screenCount != 0) {
    var minutes = Math.floor(count / 60);
    var seconds = count - minutes * 60;        
    if (count > 60){
        if (seconds < 10)
            seconds = "0" + seconds;
        screen = minutes + "m:" + seconds + "s";
        $('.timer').css('width',"120px")
    }
    else{            
        if (count < 10)
            screen = "0" + count;
        else
            screen = count + "s";            
        $('.timer').css('width',"60px")
    }
    document.getElementById('tempo').innerHTML = screen;
    if (count == 0) {
         set('temporizador', screenCount);
          $(":submit").removeAttr("disabled");
        $('#responder').click(); 

    }
    if (count != 0) {
         set('temporizador',screenCount - count );
        count = count - 1;
        setTimeout("countFunction()", 1000);
    }
    } 
    else {
        document.getElementById('tempo').innerHTML = '∞';

        set('temporizador', newCount);

         newCount++;
        setTimeout("countFunction()", 1000);
    }

}

Answer 1

当用户按下后，将加载一个全新的Javascript上下文。如果要将信息从一个页面的上下文传递到另一个页面的上下文，有几种方法可以执行此操作。

在您的特定情况下，使用LocalStorage是最简单的：

// count down 90 seconds, including page navigation on this site
var count = +localStorage.getItem('timerCount') || 90;

function countDown() {
  count--;
  localStorage.setItem('timerCount', count);
  if (count<0) window.clearInterval(myInterval);
}

var myInterval = window.setInterval(countDown, 1000);

@DmitryVolokh的建议

在此示例中，我将剩余时间存储在localStorage中。如果您想跟踪特定时刻的经过时间，您可以更好地存储起始时间并计算差异。

Answer 2

如上所述，您可以使用本地存储，但有些旧版浏览器不支持localStorage存在轻微问题：http://caniuse.com/#search=local%20storage

由于您只存储一个号码，您还可以使用cookie：

var match, count;
if (match = /timerCount=(\d+);/.exec(document.cookie)) {
  count = match[1];
} else {
  count = 90
}

function countDown() {
  count--;
  document.cookie = 'timerCount=' + count + ';';
  if (count<0) window.clearInterval(myInterval);
}

var myInterval = window.setInterval(countDown, 1000);

Answer 3

您可以使用onbeforeunload javascript事件查看用户何时离开页面，然后根据需要执行操作：更改window.location以重定向用户（并提供其他参数，如计时器），或者阻止他离开页面。您还可以创建cookie或使用localstorage来存储计时器，并在用户下次访问您的网页时将其恢复。

当用户使用后退和前进时，避免重置javascript的变量

3 个答案: