Question

I just created two versions of a function that can be used to process the date and time and return it to different HTML elements. These elements will be displayed a phone lockscreen. The function is called every second, to make sure it jumps to the next minute in time.

• v.1 works at once: it processes every time unit (sec., min. day, month etc.) each second.
• v.2 works step by step: if the numbers of second is at any time “0” process the minutes. Then, if minutes is “0” process the hours etc.

I’d expected v.2 to be faster, but according to a test I did here: http://jsperf.com/timecalccompare it’s about 90% slower! Is it really slower or is the test unreliable?

Answer 1

I’d go with the simpler way, but additionally check if the minute has actually changed before updating the view and doing the rest of the calculations:

Also there’s absolutely no reason to declare the months and days array on each iteration, so:

var months      = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days        = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var lastMinute = null;

function Update()
{
    var now, minutes, hours, day, date, month, daypart = "AM";
    now         = new Date();
    minutes     = now.getMinutes();
    if(minutes == lastMinute) return;
    hours       = now.getHours();
    day         = days[now.getDay()];
    date        = now.getDate();
    month       = months[now.getMonth()].substring(0, 3);

    if(minutes < 10) minutes = "0" + minutes;
    if(hours > 12) {
        hours -= 12;
        daypart = "PM";
    }
    if(hours == 0) hours = 12;

    $("#clock").text(hours + ":" + minutes + " " + daypart);
    $("#day").text(day);
    $("#date").text(date + " " + month);
    lastMinute = minutes;
}