What can be done to fix a countdown that relies on server timestamp and is affected by service-worker lag?

Currently, I am in the process of developing an application that requires users to perform certain actions within a specified countdown period.

The website's countdown must stay synchronized with TradingView's candle countdown.

https://i.sstatic.net/841Hc.png

  • Initially, I attempted using new Date(), but found that it does not work properly if the browser time is adjusted. Even a slight 10-second difference between Tradingview time and Application time can have critical implications.

  • In another attempt, I retrieved server time from the application API and incremented that value using a simple setInterval() method. However, there were instances where it lagged by 10-20 seconds.

    let timestamp = await getServerTime()
setInterval(() => {
    timestamp++;
    this.currentTimestamp = timestamp
}, 1000);

  • As a final resort, I experimented with utilizing a service-worker for the same setInterval() method and updating the component with the new value. Unfortunately, this approach also fell victim to lags after prolonged use.

Despite researching various solutions, none have effectively resolved this issue. Do you have any suggestions for accurately incorporating server-side time without encountering delays?

Thank you in advance!

javascriptvue.jsservice-workercountdowntradingview-api

Answer №1

To retrieve the user's locale and calculate duration, leverage the moment.js library. Utilize the locale method for obtaining the user's locale information and the duration method for duration calculation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the behavior of undefined different in Chrome?

Upon examining my Asp masterpage, I noticed the following code snippet: <script> if (theForm !== undefined) { // <<== line 746: error theForm.onsubmit = ...bla bla... ; } </script> When checking the Chrome console, an er ...

javascriptasp.netgoogle-chromeundefined

AngularJS - Sending configuration values to a directive

I'm trying to figure out how to pass parameters (values and functions) to an Angular directive. It seems like there should be a way to do this in Angular, but I haven't been able to locate the necessary information. Perhaps I'm not using th ...

javascripthtmlangularjsparametersconfiguration

I am attempting to create a skybox, yet it seems like I am overlooking a crucial element

Currently, I am attempting to create a skybox but have encountered difficulties with various tutorials. Initially, I tried to use an array approach to pass parameters for the material based on a previous example, but it seems that the method has been updat ...

javascriptarraysthree.js

The markers from KML exported from My Maps are not showing up on the Google Maps JavaScript API

I have a map on Google My Maps that I want to showcase through the Google Maps JavaScript API. This way, I can easily merge multiple maps into one and add paths/markers without needing to code it all manually. Test out the map I'm using by clicking t ...

javascriptgoogle-mapsgoogle-maps-api-3mapskml

Access the system by logging in with a stored Google account

I have experience integrating "Login via Google account" on various websites. However, some sites like Zomato always display the option to login via Google as soon as you open them. They even show a list of Google accounts that I have previously logged i ...

javascriptjquerycodeignitergoogle-signin

What is the best way to update content without having to refresh the entire page?

I need to update the content of the page without having to reload it using JavaScript. Unfortunately, my current method isn't working. window.location.assign("#/invoice/" + $scope.invoiceId); ...

javascriptangularjs

The onclick function is malfunctioning within the Node.js environment

Having trouble with Node.js not working with JavaScript code This is my File structure: app.js index.html index.js However, when I run it without Node, it works and the alert shows up. app.js var http = require('http'); var fs = require(&apo ...

javascripthtmlnode.jsdom-eventsonclicklistener

What is the best way to retrieve data from MySQL for the current month using JavaScript?

I need to retrieve only the records from the current month within a table. Here is the code snippet: let startDate = req.body.startDate let endDate = req.body.endDate let result = await caseRegistration.findByDate({ p ...

javascriptnode.jstypescript

I am experiencing an issue with environment variables not appearing in my Context component on Next.js. Should I adjust the Next.js configuration or set up the Context to properly utilize the variables?

Why are Environment Variables working on every component inside /pages but not in my Context component in Next.js? Do I need to do some configuration in Next.js for this? (Note: The Shopcontext.tsx file is using a class component that I obtained from a tu ...

javascriptreactjsnext.js

Transforming query language from jQuery to Pure JavaScript

I have the following jQuery code that I am attempting to remove and convert into standard JavaScript: $('.switch').click(()=>{ $([".light [class*='-light']", ".dark [class*='-dark']"]).each((i,ele)=& ...

javascriptjquerytypescript

What is the most effective approach to create an API for a large dataset and access it using Vue.js?

I am in the process of creating an API for my WordPress site to retrieve all posts from a custom post type. However, I have encountered some challenges and would appreciate any ideas or solutions that align with best practices. The custom post type contai ...

wordpressapivue.jsvuex

Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

javascripthtmlcss

When a button on a form is disabled using form.submit, it will not be included in the data that is

I have implemented a code on a page that locates every submit button, finds the form it belongs to, and adds a listener. This listener disables the button for a few seconds in order to prevent accidental duplicate submissions of the form. <input type=" ...

javascripthtml

Is there a way to assign or initialize a Java array as a JavaScript array without relying on JSP?

I'm currently developing in the Play framework and I'm facing a challenge with using a Java array inside Javascript. My attempt so far is as follows - var jsarray = ${javaArray}; The javaArray refers to the array stored in the Java controller ...

javajavascriptplayframework

Inject a value sent from response.render directly into the script tag

Below you will find a pug snippet. I am looking for a way to dynamically insert the user value into the chatConfig object. script. var chatConfig = { user : 'foo', pass : 'bar', } When rendering from my Express applicatio ...

javascriptnode.jsexpresspug

AngularJS - managing routes prior to application launch

Is it okay to implement a Service within the $stateProvider for this purpose? I have read various posts on stack overflow regarding routing, but most of them seem confusing, especially for beginners. Everyone seems to have a different approach, making it ...

javascriptangularjsangularjs-scopeangularjs-routing

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

cssvue.jsvuejs3

What is the process of linking this JavaScript code to an outer stylesheet and integrating it with the HTML document?

After encrypting an email address using Hiveware Enkoder, the result can be found below. obfuscated code I typically include it directly inside the div as is. However, I would like to streamline my code by placing it in an external file. While I know ho ...

javascripthtml

What is the reason why the beforeDestroy method is not invoked during a refresh, but the created method is triggered

I'm attempting to trigger a page refresh in vue.js. When doing so, I notice that the created hook is being called. Why isn't the destroyed hook triggered instead? If the created hook is being called, it suggests that the component should have be ...

vue.jsvuejs2vue-component

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

javascripthtmlcssparallax