VueJS - Building a Real-Time Timer with Begin, Halt, Continue and End

Currently, I am facing an issue with the resume function of my counter up feature.

For instance, if the timer is paused at 00:00:03, and then, five seconds later the resume button is clicked, it should continue from 00:00:04. However, in reality, the timer starts from 00:00:08.

I am unsure about how to resolve this issue.

Below are the relevant codes:

Answer №1

it is performing as anticipated, constantly comparing values against the variable that represents the starting time

this.diff = Math.abs(today.getTime() - this.actv_date.getTime());
which contains the actv_date

to enable resume functionality, you need to store the "time elapsed" and when resuming, calculate

this.actv_date = today.getTime() - timeElapsed
in order to preserve the original difference.

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

What is the method for integrating my SVG icons with q-btn-toggle?

I'm currently integrating SVG icons into my project using Quasar and I am facing an issue with the q-btn-toggle component. The documentation suggests providing a direct path to the SVG file, but in reality, the icon does not display. Below is a snippe ...

The marvels of HTML5 Canvas clipboard

Currently working on integrating a clipboard feature for our html5 text editor. Our canvas setup is causing challenges when it comes to achieving seamless copy and paste across all browsers. We've explored zeroclipboard, but have found it to be lackin ...

If the internet connection drops, I would like to show an alert notifying me about the status

Can someone provide guidance on how to display an alert message indicating loss of internet connection using AngularJS in my app? I am currently working with the AngularJS Express framework and APIs. When I encounter a situation where the internet connect ...

I'm encountering an issue with enabling Node.js support on PhpStorm as it keeps freezing at the dialog box. Does anyone have a solution for this problem?

Seeking assistance with configuring code support for Vue files in PhpStorm v10.0. Despite having Node and Vue plugins installed, my laptop also has Node(v10.16.3) downloaded. Encountering an issue where PhpStorm freezes at a dialog box, as shown in the sc ...

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

"Execute asynchronous tasks in Javascript and receive the returned

Currently, I am utilizing JSF ajax within my application and unfortunately, we are unable to make any changes to that. In the process of waiting for user action, I find it necessary to prompt the user before executing the ajax method. Specifically, I need ...

Handling Input values and Select options jointly in an event listener

I am faced with the challenge of validating and capturing multiple input values along with a select box option based on the keypress event. My goal is to gather all data from the input fields and the select box, and then send this information using the key ...

Value is extracted from the getDisplayedRowCount() function in the AGrig React and placed into

By utilizing the following code, I have been able to effectively console.log the value: console.log(this.gridApi.getDisplayedRowCount()); This snippet is placed inside the onGridReady function of my component. I am interested in retrieving this value an ...

embedding a button alongside the pager in an HTML document

I am encountering an issue with the positioning of a button in my paginated table setup. The button is currently displaying below the pager instead of being aligned on the left side of the page along with the pager. https://i.stack.imgur.com/gUiB9.png To ...

The $.each function seems to be stuck and not cycling through the

Dealing with a rather intricate JSON structure, I'm encountering difficulty iterating through it using the $.each() function. It seems to be related to the unusual 2-dimensional array passed in the value section of the standard array (hopefully that m ...

I'm feeling lost trying to figure out how to recycle this JavaScript function

Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors. Visit this example for reference: http://codepen.io/anon/pen/JWO ...

Exploring nested routes with HashRouter in React

I've been working on a dashboard/admin control panel application using React, but I'm facing some challenges when it comes to handling component rendering accurately. Initially, my main App component is structured like this: <React.Fragment&g ...

Javascript experiencing issues with Heapsort

I have been working on implementing heapsort in JavaScript, but I've encountered an issue with an undefined element at position array.length - 2, and the element at index 0 is not sorted. Here is the code snippet: var heapSort = function(array) { ...

In a React component, what is the significance of "this" in relation to accessing state values (this.state...)?

I encountered a challenging issue with the usage of the this keyword while setting a state within an ajax call. It seems like I may have misunderstood something about how React components operate. How should I properly utilize the this keyword in this sp ...

Display a list of dates within a specified range using the ng

Utilizing the ng-repeat directive to connect data with a filter for name search: <div ng-repeat='myoldrecs in myoldrec | filter:q as results '>......</div> $scope.myoldrec = [{name:ccc,date:13-02-2016},{name:ddd,date:14-02-2016}]; &l ...

Analyzing the original data form versus the modified data

I'm dealing with a form in React that utilizes react-hook-form and the useFieldArray method for adding dynamic steps. The challenge I'm facing is how to compare the original data passed to the form with the edited data, in order to make correspon ...

AngularJS: Utilizing ellipsis for text overflow and optimization

As a beginner in angularJS, I might have made some mistakes... Can anyone guide me on how to properly implement this plugin: https://github.com/BeSite/jQuery.dotdotdot on my table? Currently, the performance of my edit form and table is very slow. What c ...

Using $.when with an Array of Promises

After searching for similar questions, I came across one that was almost exactly what I needed. However, it lacked error handling, which led me to encounter some issues while trying to implement it. My objective is to create a function that takes an array ...

Is there a way to initiate the server only after webpack has finished bundling all of the bundles

"scripts": { "start": "node server.js", "build": "webpack" }, Is there a way to execute both npm run build and npm start with a single command? "scripts": { "start": " ...

unable to save the information to mongoDB

I've been attempting for the past 3 hours to save data from an HTML form to MongoDB using Node.js. When I click submit, it redirects to another page displaying the submitted data in JSON format, but it's not getting stored in the database. Here ...