Styjun

I'm trying to find an easier solution to a problem.

Problem:

I want to attempt and simplify this but I have no idea where to start.

let days = Math.floor(distance / (1000 * 60 * 60 * 24));
if(days > 0) 
 days = days + "d";

Attempt:

I was thinking I could use ternary operators to return the calculation + "d" like so:

let days = Math.floor(distance / (1000 * 60 * 60 * 24)) === 0 ? Math.floor(distance / (1000 * 60 * 60 * 24)) + "d" : "";

this is however very messy in my opinion and I can't figure out another way.

Current structure

I am currently calculating days, hours, minutes and seconds for a timer like this:

let distance = expiry - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);

After that I want to only show days if it's greater than 0 or minutes if it's greater than 0 and so on. I'm currently doing it with a bunch of if statements and a boolean to check if a value greater than 0 has been found already. Like so:

let isSet = false;

if (days > 0 && !isSet) 
 current = days + "d";
 isSet = true;


if (hours > 0 && !isSet) 
 current = hours + "h";
 isSet = true;


if (minutes > 0 && !isSet) 
 current = minutes + "m";
 isSet = true;


if (seconds > 0 && !isSet) 
 current = seconds + "s";
 isSet = true;


if (seconds < 0 && !isSet) 
 current = "expired";
 isSet = true;

This does however feel very repetitive and wrong (even if it works).

I think the best solution for patterns like this, is to define the ranges in an array, then compare against it, to avoid code duplication.

var ranges = [
 [86400000, 'd'],
 [3600000, 'h'],
 [60000, 'm'],
 [1000, 's'],
]

Then loop over this array and check if the provided value is greater than the current period.

function humanDiff(milliseconds) 
 for (var i = 0; i < ranges.length; i++) 
 if (milliseconds >= ranges[i][0]) 
 return Math.round((milliseconds / ranges[i][0])) + ranges[i][1]
 ;
 
 return milliseconds;

Example:

var expiry = new Date('2019-03-26 08:29');
var now = new Date('2019-03-26 05:00');
humanDiff(expiry - now) // 3h

Advantages:

• Avoid unnecessary calculations (don't calculate hours and minutes when days are appropriate)


• Avoid code repetition


• Separate the setup from the execution (adding more metrics is as easy as adding a new record in the ranges array)

Instead of storing the information as variables you could store them as properties of an object. You can then iterate through each property and just set the text you wish.

const dateInfo = 
 days: 1E3 * 60 * 60 * 24,
 hours: 1E3 * 60 * 60,
 minutes: 1E3 * 60,
 seconds: 1E3
;

function check(distance) 
 return Object.keys(dateInfo).reduce(function(result, key) 
 result[key] = Math.floor(distance / dateInfo[key]);
 distance -= dateInfo[key] * result[key];
 result[key] = result[key] > 0 ? `$result[key]$key` : "";
 return result;
 , );


let result = check(1E9);
console.log(result); // result
console.log(Object.values(result).join(" ")); // Print all properties
console.log(Object.values(result).find(item => item) || "Expired"); // Print first property

The most efficient and compact way is:

const dateInfo = 
 d: 1E3 * 60 * 60 * 24,
 h: 1E3 * 60 * 60,
 m: 1E3 * 60,
 s: 1E3
;

function check(distance) 
 // Find the biggest proprty that is still smaller than the total difference
 var key = Object.keys(dateInfo).find(key => dateInfo[key] <= distance);
 // No need for % since distance > dateInfo[key]
 return `$Math.floor(distance / dateInfo[key]) $ ""`;


console.log(check(3E9)); //34d
console.log(check(3E7)); //8h
console.log(check(3E5)); //5m
console.log(check(3E3)); //3s
console.log(check(3E0)); //expired

You may use conditional spread

const now = new Date(2018, 1, 5, 10, 11);
const expiry = new Date(2018, 2, 5, 5, 6);

let distance = expiry - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);

const arr = [
 ...(days > 0 ? [days + "d"] : []),
 ...(hours > 0 ? [hours + "h"] : []),
 ...(minutes > 0 ? [minutes + "m"] : []),
 ...(seconds > 0 ? [seconds + "s"] : []),
];

const current = arr.length ? arr.join(' ') : "expired";

console.log(current);

getDurationDetails:function(duration)
 var result = [];
 var units = 
 Year:31536000,
 Month:2592000,
 Week:604800,
 Day: 86400,
 Hour: 3600,
 Minute: 60,
 Second:1,
 ;

 for(var name in units) 
 var res = Math.floor(duration/units[name]);
 if(res == 1) result.push(" " + res + " " + name);
 if(res >= 2) result.push(" " + res + " " + name + "s");
 duration %= units[name];
 
 return result;
 ,

try this one

Your biggest issue is the isSet variable, not that you are using an if statement.

Instead of setting isSet, you should just use else:

var current;
if (days > 0) 
 current = days + "d";
 else if (hours > 0) 
 current = hours + "h";
 else if (minutes > 0) 
 current = minutes + "m";
 else if (seconds > 0) 
 current = seconds + "s";
 else if (seconds < 0) 
 current = "expired";
 // else seconds == 0

You might want to use conditional operators here. You should not try to merge them into the days = Math.floor(distance / (1000 * 60 * 60 * 24)) computation, leave that as is - days is just a temporary variable. Store the result of the conditional in a different variable (current), not in days:

const distance = expiry - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

const current =
 (days > 0) ? days + "d" :
 (hours > 0) ? hours + "h" :
 (minutes > 0) ? minutes + "m" :
 (seconds > 0) ? seconds + "s" :
//(seconds == 0) ? undefined :
 "expired";

A waterfall method such as you have is not a bad idea. I would modify it to update the distance variable when you add to the string, such as this (e.g. 4d 3h 17m 1s):

function formatDuration (seconds) 'expired';

And a more expressive version (e.g. 4 days, 3 hours, 17 minutes, and 1 second):

function formatDuration (seconds) 
 let s = seconds, r = '', t;

 // if (s % 31536000 !== s) updateR(' year', 31536000);
 if (s % 86400 !== s) updateR(' day', 86400);
 if (s % 3600 !== s) updateR(' hour', 3600);
 if (s % 60 !== s) updateR(' minute', 60);
 if (s > 0) updateR(' second', 1);

 function updateR(unit, n) 
 t = Math.floor(s / n);
 s %= n;
 r += (r === '' ? '' : ', ') + t + unit + (t === 1 ? '' : 's');
 

 return r.replace(/,s(?=d1,2sw+$)/, ' and ') 

You could take an array of the values and if you find an index, take this index as accessor for the value and the postfix or take 'expired' as value.

let distance = expiry - now,
 factors = [86400000, 3600000, 60000, 1000],
 values = factors.map(f => [Math.floor(distance / f), distance %= f][0]),
 index = values.findIndex(v => v > 0),
 result = index === -1 ? 'expired' : value[index] + 'DHMS'[index];

console.log(result);