I am working on a little script that warns the user that his session is about to time out and his/her changes might not get saved.
On any browser, that works pretty well and I implemented a solution that just uses setTimeout to trigger a dialog box after a certain amount of time (unless the user takes certain actions in between).
On iOS Safari, however, this approach doesn't work, as the setTimeout gets "halted" while the user navigates to another app on his/her phone. Once the user opens Safari again and comes back to the page, the timer continues where it left off, rather than looking at the total time that expired.
Any suggestions on how to approach a session timeout warning that doesn't break on the iPhone?
Set the end time of the session in a variable.
Instead of using a counter, use javascript's date:
// get a date object
var today = new Date();
// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var theHour = today.getHours();
Compare the end time to the current time every second
Disclaimer: Handle case where user returns and session has ended.
Related
I realized that a change in system time is not immediately reflected in javascript, event if I use a new Date object. It is only updated every minute.
var fakeElapsed = 0;
$(document).ready(function(){
var oldTime = 0;
function fakeTimeLoop(time){
fakeElapsed+=(time-oldTime);
oldTime = time;
$("div").html(fakeElapsed);
}
var clock = new Date();
var start = clock.getTime();
oldTime = clock.getTime();
setInterval(function(){
var clock2 = new Date();
var end = clock2.getTime();
var elapsed = end-start;
if(elapsed%5===0){
fakeTimeLoop(end);
}},
1
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div></div>
</body>
Time code, if you would turn time forward (or backwards), it takes a minute to change the time elapsed.
Is there anyway to update to the system time every second?
Edit: for those who are confused, a change in system is not reflected immediately on Chrome and Opera, but on IE and Mozzila, it is immediately reflected, I assume its order to avoid expensive system calls every time it needs to build a new Date object.
What I am looking for: is that anyway to get the current system time in chrome/opera or detect a change in system time immediately?
It's not exactly clear to me what you're trying to accomplish, but your setInterval is programmed to execute every millisecond (the second parameter is in milliseconds), but browsers treat any value less than 10 as equal to 10. Even with that restriction, the timing isn't guaranteed to be exact, so the function may well execute every 11, 12, 13, etc. milliseconds.
When you change your computer date/time and refresh the web page, new Date() will not return correct date/time. After 20-25 seconds it will return correct time. Probably it is a browsers' bug (I tested on Windows 10, Edge an Chrome).
Implementing html+js clock timer (jsfiddle sample) and I found problem when changing operating system time backward and then forward.
Lets have this html:
<div id="time">-</div>
And JS code:
var time = document.getElementById('time');
function iteration() {
time.innerHTML = new Date().toString();
}
setInterval(iteration, 100);
Lets say you started page at 2:22PM. Label display correct time.
Now change operating system local time backward 1 hour to 1:22PM, now JS new Date() correctly returns changed time 1:22PM.
Next change operating system local time forward to actual date - 2:22PM, and now JS new Date() does not return 2:22PM but old 1:22PM. So it seems to me that it does not handle correctly changes to local system time (forward only?).
Seems to be problem only in Google Chrome (37.0.2062.124 m (64-bit)).
In Internet Explorer and Firefox, JS new Date() return correct value.
Update: Does anyone know how to 'fix' this for Google chrome using JS code?
In my view, I have where the time is displayed for the user.
<h2 id="current_time">
<%= Time.now.in_time_zone(#user.time_zone).strftime("%-I:%M:%S %p") %>
</h2>
The #user.time_zone returns Pacific Time (US & Canada) and the time displays correctly. Now, I want to try and update this time using javascript so that it displays the current time if the browser is left open on this page.
Below is what I have updating the current time and this seems to work, but I cannot figure out how to get it to display in the user's time zone. It just reverts back to my system time.
How can I get this to update the current_time taking into account the user's time zone?
I tried passing the #user.time_zone to javascript, but it wants the region in Area/Location.
<script>
var current_time = setInterval(function(){system_time()},1000);
function system_time()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("current_time").innerHTML = t;
}
</script>
I am developing a simple extension where I would like to have two buttons (one being "Reduce Time" and other being "Reset Time").
I have created the manifest.json and other necessary files, including the html that contains the two buttons.
How should I code in the .js file so that I can achieve the following functionality:
On clicking the "Reduce Time", the system time should go back 10
mins
On clicking the "Reset Time", the system time should revert
back to original time.
My .js so far is thus:
var globalCount = 0;
function reduceTime(){
var d = new Date();
d.setTime(d.getTime()-600000);
globalCount = globalCount + 1;
}
function resetTime(){
var d = new Date();
if(globalCount > 0)
{
d.setTime(d.getTime() + (600000*globalCount));
}
}
But when I run the extension, and click on the "Reduce Time" button, I believe nothing happens as the date in the taskbar still shows the same value. Am I missing something?
The code is doing what you're asking it to do. If you include a log statement after either of the setTime() calls, you'll find that d is indeed changed, just as setTime() is advertised to do. Read more about setTime().
The code cannot do what you want it to do. JavaScript in a browser can't change the system clock. It would be all sorts of horror if it could.
I have a countdown script that gets the live time and subtracts it from a set time. It all works apart from the fact that it doesn't update unless you refresh your page. The setInterval at the bottom of my function instructs the function to run every one second, but it doesn't seem to be doing that...
Can anybody help?
Here is my jsfiddle: http://jsfiddle.net/4yMZy/
Each time cCountDown runs, its is calculating the time left like so:
nDates = new Date(datetime);
xDay = new Date("Fri, 26 May 2012 16:34:00 +0000");
timeLeft = (xDay - nDates);
The value of datetime there never changes from one run to another. So cCountDown is constantly running, but is always comparing the difference between the same two dates. Since the same two dates are used, the difference is always the same, so you do not see any countdown occur.
You could change nDates = new Date(datetime); to nDates = new Date(); and it will start counting down, but I am not sure why you are getting datetime from some server in the first place.
There are some other issues with your code as well. You should run it through jslint or jshint.
If changed your code to http://jsfiddle.net/4yMZy/7/
So it fetches the time and updates the seconds according to the set interval.
Edit:
jsfiddle actually provides a button for that on the top.