防止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生成的內容延遲

回答

相關問題