javascript - SetInterval不刷新Chrome中的HTML

我正在尝试实现一个脚本，该脚本实际上从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索引和顶部和底部元素的相对位置。我不认为这对于不是障碍的东西是可以接受的。

最佳答案

这是一个工作示例：

(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>