防止Javascript生成的内容延迟

我正在使用javascript倒计数功能倒计时到某个日期。问题是，当页面加载时，倒计时号码出现时略有延迟。如果网站上只有一个页面，这是可以接受的，但该功能将进入网站范围的横幅，因此整个网站访问的每一个页面都会显示延迟。这很帅气。防止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/

来源

2014-11-21 surfbird0713

你为什么不尝试从服务器端发送当前的日期，而不是 – 2014-11-21 18:33:59

我只能访问到执行运行你的JavaScript前端在这个网站上：/必须使用CMS和加载脚本在相同的'热点'我把普通的HTML ... – surfbird0713 2014-11-21 18:34:27

在这里，我有一个问题，然后。如果我的日期设置为2011年11月22日怎么办？我倒计时只剩下1122天了！'？可以吗？ – 2014-11-21 18:39:15

这是因为你等待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>

而且似乎不可思议，你运行它的每一秒，当它以天计算。那里的表现可以改善。

来源

2014-11-21 18:35:49 epascarello

谢谢！我知道必须有一个原因......我从某处复制了这段代码。我也会弄清楚如何提高你提到的性能。感谢您的建议 – surfbird0713 2014-11-21 18:49:11

由于epascarello说，你等待1秒，这里是修复：http://jsfiddle.net/cxythc7p/6/。

但也有其他的事情你应该考虑：

你可以用里面#countdown值已经初始化（通过服务器代码）开始。
你应该尽早如果你想要那个Javascript被尽早

来源

2014-11-21 18:40:21

防止Javascript生成的内容延迟

回答

相关问题