javascript - 浏览器错误在输入时显示时间文本

Question

我正在处理以下难题，但我无法理解为什么会发生。

我有以下[我相信是]等效的 JavaScript 代码片段，但其中一个未按预期工作(请注意 Console.Log):

更新一次 UI，然后意外停止更新:http://jsfiddle.net/silentwarrior/1m0v6oj1/

    jQuery(function () {
    var isWorking = true;
    if (isWorking) {
        var timeEnd = 1431220406000; // generated from php
        var timeNow = 1431210557000; // generated from php
        var counter = 1;
        var t = "";
        setInterval(function () {
            try {
                var c = timeEnd - timeNow - counter;
                console.log(c);
                var d = new Date(c);
                if (c <= 1) {
                    window.location.href = window.location.href;
                    return;
                }
                t = "";
                if (d.getHours() > 0) {
                    t += d.getHours() + "h ";
                }
                if (d.getMinutes() > 0) {
                    t += d.getMinutes() + "m ";
                }
                t += d.getSeconds();
                jQuery("#factory_start_prod").val("Working ... " + t + "s left");
                counter = counter + 1;
            } catch (e) {

            }
        }, 1000);
    }
   });

按预期不断更新 UI:http://jsfiddle.net/silentwarrior/n3gkum2e/

jQuery(function () {
    var isWorking = true;
    if (isWorking) {
        var timeEnd = 1431220406000;
        var timeNow = 1431210557000;
        var counter = 1;
        var t = "";
        setInterval(function () {
            try {
                var c = timeEnd - Date.now();
                console.log(c);
                var d = new Date(c);
                if (c <= 1) {
                    window.location.href = window.location.href;
                    return;
                }
                t = "";
                if (d.getHours() > 0) {
                    t += d.getHours() + "h ";
                }
                if (d.getMinutes() > 0) {
                    t += d.getMinutes() + "m ";
                }
                t += d.getSeconds();
                jQuery("#factory_start_prod").val("Working ... " + t + "s left");
                counter = counter + 1;
            } catch (e) {

            }
        }, 1000);
    }
});

唯一的区别是，一个使用 Date.now() 来获取当前时间戳，而另一个使用预先构建的时间戳。

为什么一个示例可以正确更新输入中的文本，而另一个示例却不能？

PS:对我来说，使用生成的时间戳而不是 Date.now() 很重要，以便在计算剩余时间时不依赖于用户系统。

Answer 1

您的第一个示例正在运行，但是每次迭代时您仅从时间戳值中减去 1，这相当于 1ms。因此，除非您等待很长时间，否则该值似乎永远不会改变。您需要在每次迭代时将计数器增加1000，以计算一秒的时间:

counter = counter + 1000;

Updated fiddle