Question

我正在尝试实现一个基本上从30秒减少到0的脚本，在0时，重定向到主页。但是，我注意到我的脚本仅适用于Firefox，但不适用于Chrome和Safari。在这些浏览器上，计数器在30秒内仍然“卡住” - 从不刷新HTML，但重定向工作正常。不确定我做错了什么，或者setInterval不是这种方法的正确方法。

<script>
   var seconds = 31;
   var counter = setInterval("timer()", 1000);
   function timer() {
        seconds = seconds - 1;
        if (seconds < 0) {
            setTimeout("location.href='http://www.homepage.com';", 100);
            return;
        }
        updateTimer();
   }

   function updateTimer() {
         document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " +  "seconds";
   }
  </script>

提前致谢！

编辑：非常奇怪，我的代码（以及你的所有代码）正在使用JSFiddle，但它实际上是在渲染页面时没有“重新绘制”HTMLinner。秒数正在变化（我将它们输出到控制台），更改只是没有渲染。

最终编辑：此问题基本上是由无效的CSS引起的。我相信 - 计数器在照片上方运行，我将跨度设置为相对定位，具有更高的z-index和顶部和底部元素。我不相信这是不可接受的。

Answer 1

这是一个工作样本：

(function() { // wrapper for locals
  var timer = document.getElementById("timer"),
    seconds = 5,
    counter = setInterval(function() {
      if (--seconds < 1) {
        clearInterval(counter);
        timer.innerHTML = "Redirecting now...";
        setTimeout(function() {
          location.href = 'http://www.homepage.com';
        }, 500);
      } else {
        timer.innerHTML = timer.innerHTML.replace(/\d+/, seconds);
      }
    }, 1000);
})();

<div id="timer">Redirecting in 5 seconds</div>

Answer 2

这是一个更清晰的实现，具有更少的已定义函数（使用demo）：

<span id='timer'></span>
<script>
var seconds = 31;
setInterval(function() {
  seconds = seconds - 1;
  if (seconds < 0) {
    setTimeout(function() {document.getElementById('timer').innerHTML = "redirecting..."}, 100);
    return;
  }
  updateTimer();
}, 1000);

function updateTimer() {
  document.getElementById('timer').innerHTML = "Redirecting in " + + seconds + " seconds";
}
<script>

当然，每个JavaScript程序员都应该有机会指出“eval是邪恶的”，包括将字符串传递给setInterval和setTimeout：）

Answer 3

将您的功能更改为适合我的变量：

<script>
   var seconds = 31;
   var counter = setInterval(timer, 1000);
   var timer = function() {
        seconds = seconds - 1;
        if (seconds < 0) {
            setTimeout("location.href='http://www.homepage.com';", 100);
            return;
        }
        updateTimer();
   }

   function updateTimer() {
         document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " +  "seconds";
   }
  </script>

SetInterval未在Chrome中刷新HTML

3 个答案: