CODEWITHSUNDEEP
javascriptjquery
Joao Carlos
Joao Carlos

Reputation: 797

Browser Bug showing time text on input

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):

Updates the UI a single time, then unexpectantly stops updating : 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/

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.

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.

Upvotes: 1

Views: 43

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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:

counter = counter + 1000;

Updated fiddle

Upvotes: 1

Related Questions