Question

我正在使用javascript倒计时功能来倒计时。问题是当页面加载时，出现的倒计时数字略有延迟。如果它只是网站上的一个页面，这是可以接受的，但是该功能将进入站点范围的横幅，因此在整个站点访问的每个页面上都会出现延迟。这很漂亮。

有没有办法阻止加载javascript生成内容的延迟？

我知道我也可以在函数中的数字旁边添加文本，所以它们一次加载而不是在文本之间弹出数字，但我想尽可能避免延迟。

以下是代码：

        var target_date = new Date("Dec 18, 2014").getTime();
         var days;
         var countdown = document.getElementById("countdown");
         setInterval(function () {
             var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;
             days = parseInt(seconds_left / 86400);
             countdown.innerHTML = days + " " ;  

        }, 1000);

这是一个小提琴，所以你可以看到我在说什么。

http://jsfiddle.net/cxythc7p/5/

Answer 1

因为你在写内容之前等了1秒。你需要马上执行它。从代码中取出代码，将其放入函数中。执行该函数并具有该函数的间隔调用。

var target_date = new Date("Dec 18, 2014").getTime();
var days;
var countdown = document.getElementById("countdown");

function myCounter() {
  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;
  days = parseInt(seconds_left / 86400);
  countdown.innerHTML = days + " ";
}
setInterval(myCounter, 1000);
myCounter();

<div id="countdown"></div>

在按天计算时，你每秒运行一次也很奇怪。那里的表现可以改善。

Answer 2

正如epascarello所说，你等了1秒，这是修复：http://jsfiddle.net/cxythc7p/6/。

但是你还应该考虑其他事情：

您可以从已初始化的#countdown内的值开始（按服务器代码）。
如果您希望尽早执行Javascript，则应尽早运行JavaScript

防止Javascript生成的内容延迟

2 个答案: