ASP.NET Core Razor视图中setInterval()方法无法正常更新倒计时

问题根源 #

你的代码里，setInterval的回调函数每次计算时，用的是第一次AJAX请求返回的服务器时间（data.date是固定值），并没有在每秒执行时重新获取最新的服务器时间，所以distance值永远不变，自然页面显示的倒计时不会更新。

修复方案 #

方案1：基于客户端本地时间自增（推荐，减少服务器请求） #

既然已经拿到初始的服务器时间和目标未来时间的差值，不需要每次请求服务器，直接在客户端每秒把distance减1000毫秒（1秒）即可：

修改后的客户端代码：

var futureTime = new Date("2023-11-13T03:07:35.5381325+03:30").getTime();
$.ajax({
    url: "/Home/CountDown",
    type: "GET",
    dataType: "json",
    success: function (data) {
        // 计算初始时间差
        var countDownDate = new Date(data.date).getTime();
        var distance = futureTime - countDownDate;

        var x = setInterval(function () {
            // 每秒减少1秒的时间差
            distance -= 1000;

            // 时间计算逻辑保持不变
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("date").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("date").innerHTML = "EXPIRED";
            }
        }, 1000);
    },
});

方案2：每秒重新请求服务器时间（不推荐，频繁请求） #

如果必须依赖服务器时间（比如客户端本地时间可能不准），可以把AJAX请求放到setInterval内部，每次获取最新的服务器时间：

var futureTime = new Date("2023-11-13T03:07:35.5381325+03:30").getTime();

var x = setInterval(function () {
    $.ajax({
        url: "/Home/CountDown",
        type: "GET",
        dataType: "json",
        success: function (data) {
            var countDownDate = new Date(data.date).getTime();
            var distance = futureTime - countDownDate;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("date").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("date").innerHTML = "EXPIRED";
            }
        },
    });
}, 1000);

注意：这种方式每秒都会发起一次HTTP请求，会增加服务器压力，除非有特殊需求，优先使用方案1。

内容的提问来源于stack exchange，提问作者Hossein