浏览器Bug在输入上显示时间文本

I am dealing with the following puzzle and I cannot understand why it is happening.

我正在处理以下难题,我无法理解为什么会发生这种情况。

I have the following [I believe to be] equivalent pieces of javascript code, but one does not work as expected (notice the Console.Log):

我有以下[我相信]相当于javascript代码片段,但一个不能按预期工作(请注意Console.Log):

Updates the UI a single time, then unexpectantly stops updating : http://jsfiddle.net/silentwarrior/1m0v6oj1/

一次更新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);
    }
   });

Updates the UI constantly as expected: http://jsfiddle.net/silentwarrior/n3gkum2e/

按预期不断更新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);
    }
});

The only difference from each other is that, the one that works uses Date.now() to get the current timestamp, while the other one uses a pre-built time stamp.

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

Why would one example update the text in the input correctly while the other wouldn't?

为什么一个示例会正确更新输入中的文本而另一个不能?

PS: it is important to me to use generated timestamps instead of Date.now() in order to not depend on the users system when calculating the time left.

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

1 个解决方案

#1

Your first example is working, however with each iteration you are only subtracting 1 from the timestamp value, which is equivalent to 1ms. Hence the value never appears to change unless you wait a really long time. You need to increment the counter by 1000 on each iteration for a second to be counted:

您的第一个示例正在运行,但是每次迭代时,您只从时间戳值中减去1,相当于1ms。因此,除非你等了很长时间,否则价值永远不会改变。您需要在每次迭代时将计数器增加1000,并计算一秒钟:

counter = counter + 1000;

Updated fiddle

1 个解决方案

#1

更多相关文章

随机推荐