代码之家 › 专栏 › 技术社区 › CodeSpent

MomentJS重置/重用DOM元素以显示新时间

momentjs jquery javascript

0

CodeSpent · 技术社区 · 7 年前

我现在已经在3个项目中与之斗争,每次都完全放弃了这个概念。我想要一个名为 general_current-time 可以动态更改以匹配活动位置的当前时间。

当前发生的情况是第一次运行将按预期执行,但任何替换它的尝试仍将在第一次请求的时间内继续迭代。

在开始新的间隔之前,我已尝试清除字段或替换文本。

有没有办法停止这段时间,再创造一个新的时间间隔?

以下样本(更新):

    function getTime(timezone) {
        stopTime(currTime);
        switch (timezone) {
            case 'Eastern':
                var b = "America/New_York"
                break;
            case 'Central':
                var b = "America/Mexico_City"
                break;
            case 'Mountain':
                var b = "America/Denver"
                break;
            case 'Pacific':
                var b = "America/Los_Angeles"
                break;
            case 'Arizona':
                var b = "America/Phoenix"
                break;
        }
        var currTime = setInterval(function () {
            var a = new moment().tz(b).format('hh:mm:ss a');
            $('#general_current-time').text(a);
        }, 1000)
    }

    function stopTime(currTime) {
        $('#general_current-time').text('Resetting..');
        clearInterval(currTime);
    }

1 回复 | 直到 7 年前

1

2

chazsolo 7 年前

您必须存储对的引用 setInterval 如果你想清除它。

var timer = setInterval(...)

// cache timezone 
var zone = {
  'Eastern': 'America/New York',
  'Central': 'America/Mexico_City',
  'Mountain': 'America/Denver',
  'Pacific': 'America/Los_Angeles',
  'Arizona': 'America/Phoenix'
}[data.Timezone];

// cache DOM element to update
var $time = $('#general_current-time');

function updateTime() {
  $time.text(moment().tz(zone).format('hh:mm:ss a'));
}

// store a reference to the timer. Also, since the format precision is
// seconds, only run this every ~1000ms
var interval = setInterval(updateTime, 1000);

注意 updateTime zone 和 $time

// stop the interval using the timer reference
clearInterval(interval);

var newInterval = setInterval(updateTime, 1000);

完整程序(来自代码笔)

$(document).ready(function() {
  let interval;

  $("#la").click(function() {
    clear(interval);

    interval = setInterval(function() {
      $("#time").text(
        moment()
        .tz("America/Los_Angeles")
        .format("hh:mm:ss a")
      );
    });
  });

  $('#east').click(function() {
    clear(interval);

    interval = setInterval(function() {
      $('#time').text(moment().tz('America/New_York').format('hh:mm:ss a'));
    });
  });

  $('#clear').click(function() {
    clearInterval(interval);
  });
});

function clear(interval) {
  clearInterval(interval);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" type="text/javascript"></script>

<p id="time">00:00</p>
<button id="la">Arizona</button>
<button id="east">East</button>
<button id="clear">Clear</button>