1

I did create an Aura component to display Timer in HH:MM:SS using the Javascript but when the browser is minimised, I do notice the Timer sleeps/freezes and when browser restored Timer continues from where it went to sleep/freezed. Is there any feature where timer can run even when it is minimised? Appreciate the help.

    setStartTimeOnUI : function(component) {
        this.setIntervalTimerId = setInterval(function() {
            var currTime = component.get("v.ltngCurrTime");
            var ss = currTime.split(":");
            var today = new Date();
            today.setHours(ss[0]);
            today.setMinutes(ss[1]);
            today.setSeconds(ss[2]);
            var dt2 = new Date(today.valueOf() + 1000);
            var temp = dt2.toTimeString().split(" ");
            var ts = temp[0].split(":");
            var timer = ts[0]+":"+ts[1]+":"+ts[2];
            component.set("v.ltngCurrTime",timer);
        },1000);
        console.log(this.setIntervalTimerId);
    }

4
  • What is the purpose of keeping a clock on the client side? Would this be better suited for the server?
    – nbrown
    Sep 29, 2020 at 16:29
  • Timer lets the user know how long he/she has been working on a Salesforce Case, also at 20th min based on client side timer I am trying to push a desktop notification which is not accurate as the user minimises the window thereby Timer sleeps/freeze.
    – Mani
    Sep 30, 2020 at 6:43
  • I updated my answer with my details based on your use-case. This will not be a straightforward task within Salesforce due to constraints the system puts on you.
    – nbrown
    Sep 30, 2020 at 12:49
  • I would recommend you to look into entitlements + milestones which seems to more or less meet requirements. Sep 30, 2020 at 13:04

1 Answer 1

0

If you want to have your clock always reflect the browser's time, then you will need to make a function similar to this GeeksForGeeks post about building a JavaScript clock. This doesn't fix the problem of the code not running if the process goes idle or the window gets minimized, but what it will do is match the current time in the browser upon the next iteration.

Relevant code from the tutorial:

setInterval(showTime, 1000); 
function showTime() { 
    let time = new Date(); 
    let hour = time.getHours(); 
    let min = time.getMinutes(); 
    let sec = time.getSeconds(); 
    am_pm = "AM"; 

    if (hour > 12) { 
        hour -= 12; 
        am_pm = "PM"; 
    } 
    if (hour == 0) { 
        hr = 12; 
        am_pm = "AM"; 
    } 

    hour = hour < 10 ? "0" + hour : hour; 
    min = min < 10 ? "0" + min : min; 
    sec = sec < 10 ? "0" + sec : sec; 

    let currentTime = hour + ":"  
        + min + ":" + sec + am_pm; 

    document.getElementById("clock") 
        .innerHTML = currentTime; 
} 

showTime(); 

I also left a comment about what you're planning on using this clock for as there is likely a better way to keep track of the time rather than relying on a browser's clock which will be different based on the user's time zone and could also be incorrect.


After seeing your reason for keeping a clock (timing how long someone is working on a Case and notifying them after 20 minutes has elapsed) I do not think this will be a straightforward task and definitely won't be one that can be accomplished with setInterval. It is not a hard and fast rule that a minimized window would have its JS code stop running, but browsers and operating systems are smart enough to de-prioritize the execution of things that aren't in the user's focus. There are several Stack Overflow posts about developers trying to keep code running in minimized windows and most will point to web/service workers as a solution.

The traditional way you would accomplish something like this is with Web Workers, but Locker Service does not allow them.

You may look into turning on Notifications to allow for push notifications to be sent to phones and desktops to notify users, but how you would ensure that they're timed for 20 minutes after opening a Case may not be possible as that would put the job of keeping track of the time on the server. And Salesforce would not like the idea of users consuming shared cycles to keep a clock 😅.

One last thing, you can also look into embedding a Visualforce page inside of a Lightning component and have the VF page add workers to the user's browser where Locker Service will not be a constraint.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .