Modify the javascript function called on button click - javascript

At our office we check in by opening a webpage and clicking on a check-in button.The following function is called while clicking the button:
function checkInOutSubmit(thisController, thisAction, checkName){
var visitortime = new Date();
var visitortimezone = "GMT " + -visitortime.getTimezoneOffset() / 60;
var timeZone = jstz.determine_timezone();
var timeZoneName = timeZone.name();
var checkInCheckOut = checkName
jQuery.ajax({type:'POST',data:{checkInCheckOut:checkInCheckOut,currentController: thisController,currentAction: thisAction,timez:timeZoneName}, url:'/pms/attendanceForgot/checkInCheckOut',success:function(data,textStatus){jQuery('#successdiv').html(data);successCheckInOut();},error:function(XMLHttpRequest,textStatus,errorThrown){}});
}
But I want to put a old time when clicking on the button and not the current time.(If I reach click the button at 11:00am, I want to post 10:00am as my checkin time).
How can this be done?

There is not enough information here to answer your question.
All this code is doing is finding the current time zone, not the current time. It passes that to the server via an ajax request, which makes me think the time is generated server side. It's possible you could alter the logged time on the server by changing the timezone to an offset that would make it look like you are clocking in at the right time, but it would have to be some seriously deficient code on the server for that to work.
In almost all likelihood, the server is storing the time of the request in universal time as the clock in time and when you leave it's storing the time you leave in universal time as well. (think a point in time that isn't dependent on timezones) If your goal is get more hours, you'll just have to work later when you come in late. If you want it to look like you came in "on time", then changing the timezone might help until they notice that you've been there from 10am to 6pm but are only logging 7 hours.

Related

Schedule notification at the right time using javascript Date() in React-Native

I am trying to schedule a notification based on a time i am getting from a server.
the problem is the notification shows but its not showing at the right time sometimes it display at the right time and sometimes it doesn't i am not sure why, i think the problem is with the time formatting the one i am getting from the server and the devices time. here an example time i am getting from the server : 2019-12-20T13:55:00.000 now i want to schedule a notification with this time i am doing something like this:
var notifDate = new Date("2019-12-20T13:55:00.000").getTime()
var currentDate = new Date().getTime()
var diff = notifDate - currentDate
Notification.schedule(diff)
now my questions is how can i ensure every notification is gonna display at the right time and maybe if i have to make the currentDate and notifDate the same format. i don't know much about how Date works. i know this question doesnt state much but anykind of suggestion is appreciated.
Thanks

Javascript: Implement precise clock

I am implementing a live clock in front-end of a large application. For that I have came up with following approach -
JavaScript
var span = document.getElementById('span');
function time() {
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
span.textContent = h + ":" + m + ":" + s;
}
setInterval(time, 1000);
HTML
<span id="span"></span>
This approach works perfectly fine in isolation, but when this code is integrated in the application which is having several events and function calls, the clock starts lagging by few minutes after say couple of hours until the page is refreshed.
I think this delay is because of setInterval being a web (browser) API and is handled asynchronously it may not execute exactly after 1 second as written in the code every time, if the call stack is not empty after 1 second from time being setInterval is registered due to other function calls/ events present in the call stack of event loop.
So if the page is not refreshed for long time the delay continues to grow. Also the application is written in Angular which is a Single Page application where the page never reloads on navigation because of routing until the page is forcefully refreshed.
So how to build a precise clock in JavaScript which will never delay when integrated in a large application?
Update: Thanks everyone for the response. I think some of you are right, I may be missing some of the details. Actually I was implementing this few days back at work, but have to left this due to some reason and lost track of it. But there was some delay issue for sure working with Date and Timers. Suddenly now this came to my mind and thought asking it here. Extremely sorry for not providing concrete details.
Still I will try to recollect the details and update the question accordingly if possible.
the clock starts lagging by few minutes after say couple of hours until the page is refreshed.
Thats impossible with the code you've shown, new Date should return the correct time, no matter how often you reflect its value to the page.
So if the page is not refreshed for long time the delay continues to grow.
Most browsers today will adjust the timers slightly, so that they are quite accurate on average (e.g. if one timer gets called to late by 1ms, the next will be called 1ms earlier), therefore you can only cause a drift over a longer time if you will leave the page, which will pause the timer. That still shouldn't affect new Date though.
Have a look at the Chromium source
Timers in web browsers get dialled back when the page doesn't have focus. You can't change or prevent that. You're already doing the primary thing that's important: Using the current time to update the clock, so that even if your time function isn't called for three seconds, when it runs it updates with the then-current time, skipping over the intermediate values. (You often see people assuming the timer will run at exactly 1000ms intervals and just adding to the seconds value rather than using the current time, which is incorrect.)
If I were doing this, I'd probably decrease the interval (run the callback more often) and use a chained series of setTimeout rather than a single setInterval, not least because different browsers have historically handled setInterval in different ways.
So for instance:
function time() {
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
span.textContent = h + ":" + m + ":" + s;
setTimeout(time, 250);
}
time();
But if the page is inactive, the clock will get out of date, because the browser will either completely suspend timer execution or at least markedly dial it back. When the page becomes active again, though, hopefully it'll correct itself after no more than 250ms.

Refresh time on via javascript (systemtime)

I have an own PHP loginsystem. Users will be logged out after 5 min of inactivity.
Now I want to show a timer in the right top corner to display the countdown.
At the moment I am using javascript.
Like this (Pseudo, haven't my code here at the moment):
var myTime = <?php echo time(); ?>;
window.setInterval(myTime = myTime - 1; $("#timertext").text(myTime), 1000);
But I don't like this solution. I would like to use the current system time (php) and subtract the time, the user was active at last.
I found a solution to get the current system time via Ajax. But is this a good idea?
What do you think I could do to realize this counter? Is there a smart solution? Maybe a completely other way?

Google app engine: sync all servers' time and clients' javascript timers

I am developing a bidding system on Google App Engine with Python. A product is opened for bidding at a predefined time and the bidding lasts for 3 minutes. The price of the product drops down every second by a constant value in the 3-minute period until it is zero. And the bidder who presses the "Bid" button first wins the bid. One critical issue in this application is that the time among all users should be perfectly synced so that everybody sees the same price at the same time. The following is what I have come up so far but it suffers from inaccurate timers.
When a user visit or refresh the page, the Python code will pass the sever time to the javascript timer and the timer starts to count down. The simplified javascript is as follows:
var count = {{timeToBid}}; // 'timeToBid' is in seconds and is inserted by the template engine
var price =={{initialPrice}} // The initial product price
var currentPrice; // Current price
function updateTime() {
timeStr = ...; // Set the time string to be HH:MM:SS
$("#timeToBid").html(timeStr); // Display time in the 'timeToBid' div
if (count <= 180) { // Start bidding
currentPrice = ...; // Calculate the current price
$("#currentPrice").html(currentPrice); // Update current price
}
count--;
setTimeout(updateTime, 1000); // Executed every second
}
updateTime();
The above javascript suffers significantly from unsynced timers among user browsers, as well as unsynced server times (see this). The current price displayed in each browser can vary in a huge range which makes the system totally unusable. This is a rather complicated problem and I am asking for good solutions. One or two seconds time inaccuracy is acceptable. My questions:
(a) To make the javascript timer more accurate, I plan to use AJAX to retrieve the server time every 10 seconds and then update 'count'. Is this a good solution? Or there are other options?
$.ajax({
url: "/getServerTime",
cache: false,
success: function(serverCount) {
count = parseInt(serverCount);
return false;
}
});
(b) I have absolutely no idea how to solve the server time inconsistency problem. Can anybody help? Thanks.
System clocks on App Engine servers are kept in sync: see this authoritative answer.
Every App Engine HTTP response has a Date header, like this Date: Wed, 24 Apr 2013 06:03:37 GMT. You can use this to sync browser with server time.

Settimeout not working when window loses focus

I have a simple JavaScript chronograph that displays on a form field called "d2", it is used to check how long someone takes on doing a specific task:
var milisec=0
var seconds=0
var complemento1=""
document.form1.d2.value='00:00:00'
function display(){
if (milisec>=9){
milisec=0
seconds+=1
}
else{
milisec+=1
}
complemento1=complemento2=complemento3="";
if ((seconds%60)<10) complemento1="0";
if ((Math.floor(seconds/60)%60)<10) complemento2="0";
if ((Math.floor(seconds/3600))<10) complemento3="0";
document.form1.d2.value=complemento3+Math.floor(seconds/3600)+":"+complemento2+(Math.floor(seconds/60)%60)+":"+complemento1+(seconds%60)
setTimeout("display()",100)
}
The problem is that when the person opens a new tab / uses another program the timer stops, and then resumes when the window is focused again (Using Chrome). It has the weirdest behavior, because sometimes it works, sometimes it doesn't.
I saw many posts that needed a script to stop when not on focus, I want the exact opposite and searched for over an hour with no luck. Your help is greatly appreciated!
JavaScript timeouts are not guaranteed be executed at a specific time. For example if the thread is busy with something else at the time when the timer finishes, it will first finish what it is doing and then execute your timer.
Also your function does not take into account the time spend inside the display function, so a little delay will be added for each millisecond.
The correct way to implement a timer is using the system time.
So something like:
//Call at the beggining to save the start time
var start_time = new Date()
// Compute seconds (does not matter when/how often you call it.)
var milliseconds_since_start = new Date().valueOf() - start_time
The Date object can also format this period as a clock for you:
var m = new Date(milliseconds_since_start)
m.getMinutes()+":"+m.getSeconds()

Categories