下面是我两段代码，是关于时间的代码
第一段代码，不知道为什么时间，时间走着走着会变慢。他是当用户最开始访问页面时加载了时间戳，接下来除非用户主动刷新页面不让就浏览器自己渲染走时间。
第二段代码，时间是准确，毕竟每秒都ajax请求服务器时间来校准前端，但给服务器带来了不少的压力。
目前我为了时间准确我用第二段代码，但服务器压力真的好大啊，想改进一下。希望高手帮帮忙，改进能保准时间的同时用不要给服务器太大的压力。
我要的结果是，前端浏览器渲染时间每秒刷新，但每隔1分钟由ajax请求服务器时间校准一次前台的时间，当然用户自己主动刷新页面时肯定也是请求服务器校准。
第二段代码目前是前台渲染和请求服务器都是一秒。我不知道这么拆分开。帮忙拆分一下，把请ajax求时间独立出来设置。
求高手解决!!!!!!!!!!!!!!!谢谢！
如果哪个高手再慷慨点，解决上面问题的同时再补充完善下面我说的想法我就跪谢了，我的想法是：此网页在用户浏览器当前窗口时ajax请求服务器校准时间是每分钟校准一次，但当此页面不在用户浏览器当前窗口时ajax不请求服务器校准，只保持前端浏览器渲染的每秒刷新，但当用户切换此网页为当前窗口时ajax立刻请求服务器校准时间，然后，如果保持此页面在当前窗口就按上面的每分钟请求服务器校准一次，如果又不在当前窗口了就又不需要请求服务器校准时间了。其实就是减少服务器的压力，怕有些用户一直打开网页不关闭或不在当前页面时继续消耗服务器的资源。如果哪个高手有既保证时间准确有减少服务器压力的方法也可以提供。谢谢。
第一段代码：
<SCRIPT LANGUAGE="JavaScript">
var timerID; var past_time=0;
function tzone(ts) { this.ct = new Date(0); this.ts = ts; }
function UpdateClocks() {past_time++;
var ct = new Array(new tzone(1584189923),new tzone(1584200723),new tzone(1584146723),new tzone(1584164723),new tzone(1584193523),new tzone(1584189923),new tzone(1584161123)) ;
var dt = new Date() ;
var startDST = new Date(dt.getFullYear(), 3, 1) ;
while (startDST.getDay() != 0) startDST.setDate(startDST.getDate() + 1) ;
var endDST = new Date(dt.getFullYear(), 9, 31) ;
while (endDST.getDay() != 0) endDST.setDate(endDST.getDate() - 1) ;
var ds_active ;
if (startDST < dt && dt < endDST) ds_active = 1; else ds_active = 0;
var printstr = "";
gmdt = new Date();
for (n=0 ; n<ct.length ; n++) {
ct[n].ct = new Date((ct[n].ts+past_time) * 1000) ;
}
document.getElementById('Clockk0').innerHTML = ClockString(ct[0].ct);
document.getElementById('Clockk1').innerHTML = ClockString(ct[1].ct);
document.getElementById('Clockk2').innerHTML = ClockString(ct[2].ct);
document.getElementById('Clockk3').innerHTML = ClockString(ct[3].ct);
document.getElementById('Clockk4').innerHTML = ClockString(ct[4].ct);
document.getElementById('Clockk5').innerHTML = ClockString(ct[5].ct);
document.getElementById('Clockk6').innerHTML = ClockString(ct[6].ct);
timerID = window.setTimeout("UpdateClocks()", 1001);}
function ClockString(dt) {
var stemp ;
var dt_year = dt.getUTCFullYear();
var dt_month = dt.getMonth() + 1;
var dt_day = dt.getDate();
var dt_hour = dt.getHours();
var dt_minute = dt.getMinutes();
var dt_second = dt.getSeconds();
dt_year = dt_year.toString();
if (dt_hour < 10) dt_hour = '0' + dt_hour ;
if (dt_minute < 10) dt_minute = '0' + dt_minute ;
if (dt_second < 10) dt_second = '0' + dt_second ;
//stemp = dt_month + '月' + dt_day + '日';
stemp = ' <span>' + dt_hour + "</span>:<span>" + dt_minute + "</span>:<span>" + dt_second + "</span>";
return stemp ;
}
</script>
第二段代码：
<script language="JavaScript">
var timerID ;
var past_time=1;
function tzone(os, ds, cl)
{
this.ct = new Date(0) ; // datetime
this.os = os ; // GMT offset
this.ds = ds ; // has daylight savings
this.cl = cl ; // font color
}
function UpdateClocks()
{
past_time++;
var timerID = null;
var timerRunning = false;
var ct = new Array(
new tzone(+8, 0, 'silver'), /*北京#50#0*/
new tzone(+11, 0, 'silver'), /*堪培拉#145#1*/
new tzone(-5, 0, 'silver'), /*华盛顿#111#2*/
new tzone(+1, 0, 'silver'), /*巴黎#67#3*/
new tzone(+9, 0, 'silver'), /*东京#31#4*/
new tzone(+8, 0, 'silver'), /*北京#50#5*/
new tzone(+0, 0, 'silver'), /*伦敦#96#6*/
new tzone(+3, 0, 'silver'), /*莫斯科#58#7*/
new tzone(+5.50, 0, 'silver'), /*新德里#46#8*/
new tzone(+0, 0, 'silver'), /*伦敦#96#9*/
new tzone(+8, 0, 'silver'), /*北京#50#10*/
new tzone(-3, 0, 'silver'), /*智利-圣地亚哥#132#11*/
new tzone(+9, 0, 'silver'), /*东京#31#12*/
new tzone(+2, 0, 'silver'), /*南非-开普敦#185#13*/
new tzone(+11, 0, 'silver'), /*堪培拉#145#14*/
new tzone(+13, 0, 'silver'), /*惠灵顿#146#15*/
/*new tzone(+0, 0, 'silver'), 纽约*/
new tzone(-5, 0, 'silver') /*华盛顿#111#16*/
);
// Adjust each clock offset if that clock has DS and in DS.
// for(n=0 ; n<ct.length ; n++)
// if (ct[n].ds == 1 && ds_active == 1) ct[n].os++ ;
// compensate time zones
var printstr = "";
var dateObj;
var urlStr = "/skins/unixtime/date/index.php" + "?" + new Date().getTime();
$.ajax({
url: urlStr,
async: false,
success: function(data){
dateObj = new Date(data);
}
});
//gmdt = new Date($.ajax({async: false}).getResponseHeader("Date")) ;
gmdt = new Date(dateObj) ;
for (n=0 ; n<ct.length ; n++) {
ct[n].ct = new Date((gmdt.getTime()/1000 + ct[n].os * 3600) * 1000) ;
//ct[n].ct = new Date((past_time+gmdt.getTime()/1000 + ct[n].os * 3600) * 1000) ;
//ct[n].ct = new Date(gmdt.getTime()+1000 + ct[n].os * 3600 * 1000) ;
}
document.getElementById('Clockk0').innerHTML = ClockString(ct[0].ct);
document.getElementById('Clockd0').innerHTML = ClockdString(ct[0].ct);
document.getElementById('Clocksjd0').innerHTML = ClocksjdString(ct[0].ct);
/*document.getElementById('Clocks0').innerHTML = ClocksString(ct[0].ct);*/
document.getElementById('Clockk1').innerHTML = ClockString(ct[1].ct);
document.getElementById('Clockd1').innerHTML = ClockdString(ct[1].ct);
document.getElementById('Clockk2').innerHTML = ClockString(ct[2].ct);
document.getElementById('Clockd2').innerHTML = ClockdString(ct[2].ct);
document.getElementById('Clockk3').innerHTML = ClockString(ct[3].ct);
document.getElementById('Clockd3').innerHTML = ClockdString(ct[3].ct);
document.getElementById('Clockk4').innerHTML = ClockString(ct[4].ct);
document.getElementById('Clockd4').innerHTML = ClockdString(ct[4].ct);
document.getElementById('Clockk5').innerHTML = ClockString(ct[5].ct);
document.getElementById('Clockd5').innerHTML = ClockdString(ct[5].ct);
document.getElementById('Clockk6').innerHTML = ClockString(ct[6].ct);
document.getElementById('Clockd6').innerHTML = ClockdString(ct[6].ct);
document.getElementById('Clockyyr7').innerHTML = ClockyyrString(ct[7].ct);
document.getElementById('Clockyyr8').innerHTML = ClockyyrString(ct[8].ct);
document.getElementById('Clockyyr9').innerHTML = ClockyyrString(ct[9].ct);
document.getElementById('Clockyyr10').innerHTML = ClockyyrString(ct[10].ct);
document.getElementById('Clockyyr11').innerHTML = ClockyyrString(ct[11].ct);
document.getElementById('Clockyyr12').innerHTML = ClockyyrString(ct[12].ct);
document.getElementById('Clockyyr13').innerHTML = ClockyyrString(ct[13].ct);
document.getElementById('Clockyyr14').innerHTML = ClockyyrString(ct[14].ct);
document.getElementById('Clockyyr15').innerHTML = ClockyyrString(ct[15].ct);
document.getElementById('Clockyyr16').innerHTML = ClockyyrString(ct[16].ct);
timerID = window.setTimeout("UpdateClocks()", 940) ;
//timerRunning = true;
}
function ClockString(dt)
{
var stemp ;
var dt_year = dt.getUTCFullYear() ;
var dt_month = dt.getUTCMonth() + 1 ;
var dt_day = dt.getUTCDate() ;
var dt_hour = dt.getUTCHours() ;
var dt_minute = dt.getUTCMinutes() ;
var dt_second = dt.getUTCSeconds() ;
dt_year = dt_year.toString() ;
if (dt_hour < 10)
dt_hour = '0' + dt_hour ;
if (dt_minute < 10)
dt_minute = '0' + dt_minute ;
if (dt_second < 10)
dt_second = '0' + dt_second ;
// stemp = dt_hour + ":" + dt_minute + " " ;
//stemp = dt_month + '月' + dt_day + '日';
stemp = ' <span>' + dt_hour + "</span>:<span>" + dt_minute + "</span>:<span>" + dt_second + "</span>";
return stemp ;
}
function ClockdString(dt)
{
var stemp ;
var dt_year = dt.getUTCFullYear() ;
var dt_month = dt.getUTCMonth() + 1 ;
var dt_day = dt.getUTCDate() ;
var dt_days = dt.getUTCDay() ;
var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
dt_year = dt_year.toString() ;
stemp = dt_year + '年' + dt_month + '月' + dt_day + '日,星期'+ weekDay[dt_days];
return stemp ;
}
function ClocksString(dt)
{
var stemp ;
var dt_second = dt.getUTCSeconds() ;
stemp = dt_second + ' 秒';
return stemp ;
}
function ClockyyrString(dt)
{
var stemp ;
var dt_year = dt.getUTCFullYear() ;
var dt_month = dt.getUTCMonth() + 1 ;
var dt_day = dt.getUTCDate() ;
var dt_hour = dt.getUTCHours() ;
var dt_minute = dt.getUTCMinutes() ;
var dt_second = dt.getUTCSeconds() ;
dt_year = dt_year.toString() ;
if (dt_hour < 10)
dt_hour = '0' + dt_hour ;
if (dt_minute < 10)
dt_minute = '0' + dt_minute ;
if (dt_second < 10)
dt_second = '0' + dt_second ;
// stemp = dt_hour + ":" + dt_minute + " " ;
//stemp = dt_month + '月' + dt_day + '日';
stemp = dt_year + '/' + dt_month + '/' + dt_day +' '+ dt_hour + ':' + dt_minute + ':' + dt_second;
return stemp ;
}
function ClocksjdString(dt)
{
var stemp ;
var dt_hour = dt.getUTCHours() ;
if(dt_hour <= 6){dt_sjd = '凌晨'}
else if (dt_hour <= 8){dt_sjd = '早晨';}
else if (dt_hour <= 11){dt_sjd = '上午';}
else if (dt_hour <= 13){dt_sjd = '中午';}
else if (dt_hour <= 17){dt_sjd = '下午';}
else if (dt_hour <= 19){dt_sjd = '傍晚';}
else if (dt_hour <= 22){dt_sjd = '晚上';}
else {dt_sjd = '深夜';}
stemp = '当前为：' + dt_sjd;
return stemp ;
}
//UpdateClocks();
</script>
参考GPT和自己的思路：
好的，针对你的问题，我来给你提供一下修改思路。
首先，你需要把第一段代码中的计时器部分去掉，即不再使用window.setTimeout()方法来让页面自动刷新，而是使用setInterval()方法来让页面每秒刷新一次。这样可以保证页面每秒更新一次时间，同时也不会让计时器产生“时间变慢”的问题。
其次，你需要在页面加载时先向服务器请求获取一次当前时间，然后将该时间保存在一个变量中，之后每秒钟更新一次页面时间时，就用该变量加上一秒钟的毫秒数来计算出当前时间，不再向服务器发送请求。每隔一分钟再向服务器请求一次当前时间，以保证时间的准确性。
最后，需要判断页面当前是否为用户所在的浏览器窗口，如果是则按照上述逻辑执行，否则只更新一次时间即可，不需要每秒钟都更新。
关于用户打开页面不关闭或者页面不在当前窗口的问题，可以采用页面可见性API来进行判断。当页面不可见时，停止计时器；当页面可见时，恢复计时器，并且立即向服务器请求一次当前时间。这样可以保证页面不会一直消耗服务器资源，同时也可以保证时间的准确性。
希望我的回答能够帮到你，如果还有什么问题，可以继续问我哦。