自动刷新时间变量(Moments TZ)
自动刷新时间变量(Moments TZ)
提问于 2021-04-25 12:14:35
我可以使用下面的代码打印当前拾取的时间(从JSON输入)。
但是，我需要每秒自动更新名为j_time的变量以显示时钟。请协助。
注意:我读过关于setinterval的文章。我无法成功地实现相同的方法，因为为j_time收集的值也传递给了divcontent。
function onSuccess(data) {
var objItems = data.d.results;
var divContent = '<dl class="row" id="infoList">';
for (var i = 0; i < objItems.length; i++) {
var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
console.log(j_time);
divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_time + '</dd>';
}
$('#info').append(divContent);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-25 20:49:29
var Timer = (function () {
function Timer(selector, timeZone) {
this.time = moment().tz(timeZone);
this.format = "DD/MM/YYYY HH:mm:ss (Z)";
this.element = $(selector);
this.meta = {
interval: null,
last: null,
now: null
}
$(selector).data('timer', this);
}
Timer.prototype.start = function () {
var _this = this;
this.meta.last = this.meta.now = Date.now();
this.meta.interval = setInterval(function () {
_this.meta.now = Date.now();
_this.time.milliseconds(_this.time.milliseconds() + _this.meta.now - _this.meta.last);
_this.meta.last = _this.meta.now;
_this.element.text(_this.toString());
}, 1e3);
}
Timer.prototype.stop = function () {
clearInterval(this.meta.interval);
}
Timer.prototype.toString = function () {
return this.time.format(this.format);
}
return Timer;
}());
var timer = new Timer("#displayTime", "Asia/Kolkata");
timer.start();
// to stop
// timer.stop(); // or
// $("#displayTime").data('timer').stop();
// to get time
// timer.time; // or
// $("#displayTime").data('timer').time;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" integrity="sha512-rjmacQUGnwQ4OAAt3MoAmWDQIuswESNZwYcKC8nmdCIxAVkRC/Lk2ta2CWGgCZyS+FfBWPgaO01LvgwU/BX50Q==" crossorigin="anonymous"></script>
<div id="displayTime"></div>
Stack Overflow用户
发布于 2021-04-25 13:44:15
您将如何更新j_time？您是添加递增其值的本地数据，还是从返回您使用的JSON数据的调用中添加？
在第一种情况下，您可以像这样更新DOM：
var j_times = []; // not require initialization, but I like to do it
function onSuccess(data) {
var objItems = data.d.results;
var divContent = '<dl class="row" id="infoList">';
for (var i = 0; i < objItems.length; i++) {
var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
j_times.push(j_time);
console.log(j_time);
divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_time + '</dd>';
}
$('#info').append(divContent);
}
setInterval(() =>
{
var divContent = '<dl class="row" id="infoList">';
for (var i = 0; i < j_times.length; i++) {
j_times[i].setSeconds(j_times[i].getSeconds() + 1);
divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_times[i] + '</dd>';
}
$('#info').empty();
$('#info').append(divContent);
}, 1000);它并不优雅，要求您可以每秒删除和插入元素……因此，要只更新日期，您可以执行以下操作：
var j_times = []; // not require initialization, but I like to do it
function onSuccess(data) {
var objItems = data.d.results;
var divContent = '<dl class="row" id="infoList">';
for (var i = 0; i < objItems.length; i++) {
var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
j_times.push(j_time);
console.log(j_time);
divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9" id="infoListTime' + i + '">' + j_time + '</dd>';
}
$('#info').append(divContent);
}
setInterval(() =>
{
for (var i = 0; i < j_times.length; i++) {
j_times[i].setSeconds(j_times[i].getSeconds() + 1);
$("#infoListTime"+i).text(j_times[i]);
}
}, 1000);如果您需要的是每秒获取JSON文件，那么由于网络延迟之类的原因，这可能会证明效率低下……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67249712
复制相关文章
相似问题
腾讯云开发者
