自动刷新时间变量 (Moments TZ)

Question

我可以使用下面的代码打印当前选择的时间（来自 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);
        }

Answer 1

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>

Answer 2

你将如何更新 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 文件，由于网络延迟等原因，它可能证明效率低下......