How can I stop and hover over time in AngularJs Interval?

Within my UI, I have a time element that is continuously updated using AngularJS Interval. Even the milliseconds are constantly running. Is it possible to implement a feature where the time pauses when hovering over it? Any assistance would be greatly appreciated. Below are the provided codes.

Snapshot of the UI

HTML Code

 <div class="container">
 <div class="row ">
 <div class="col-lg-12 text-center" ng-app="myApp" ng-controller="myCtrl">
<h3  ><b id="thetime">{{theTime| date:'hh:mm:ss sss a'}}</b></h3>
</div>
</div>
</div>

AngularJS Script

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date();

  $interval(function () {
      $scope.theTime = new Date();    
  }, 6);

});

Answer №1

When the mouse is over, the interval function stops in ng-mouseover, and when the mouse leaves, the interval function starts again in ng-mouseleave.

    $scope.startInterval = function(){
         $scope.flag = $interval(function(){
                        $scope.theTime = new Date();
                    }, 6);
    }

    $scope.stopInterval= function(){
       if($scope.flag)
       $interval.cancel($scope.flag);
    }
    $scope.startInterval();

https://jsfiddle.net/ebinmanuval/7qo4jtjv/

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

Height problem with the data-reactroot component

On one of my web pages, there is a data-reactroot element with a height of approximately 1906px. However, the surrounding divs and html tags have a height of only 915px. I am trying to figure out how to make all the enclosing elements match the same heigh ...

The integration of AngularJS with Bootstrap 3 accordion seems to encounter issues when included through ng-view

Here's the issue: When using the accordion in a view loaded with the ng-view directive, the accordion title clicks stop working correctly. Check out this demo for an example However, when the accordion is used directly on the page without ng-view, i ...

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

How can I export an ES Object in Node.JS to an NPM package?

I am currently facing a challenge involving an ES5 object/function that I want to integrate into an NPM package. This particular object is within a namespace defined as MY_NAMESPACE.myObject = function(){...} where MY_NAMESPACE is simply an object. Typic ...

Working with high-resolution images on HTML5 canvas

I am faced with a challenge of incorporating a 15000x15000 px vector image as the backdrop for my canvas project. It is essential to crop specific sections of this image swiftly and consistently, especially within requestAnimationFrame. My current method ...

When you use ReactDOM.render inside a <div>, it does not instantly generate HTML code

I am currently working with React version 16.7 and attempting to embed React components into a third-party JavaScript library (specifically, Highcharts) that requires me to output HTML from a function. This is the approach I am taking at the moment: funct ...

Is there a way to prevent Material-UI SpeedDial from automatically closing when a SpeedDialAction button is clicked?

Looking to customize the functionality of Material-UI's SpeedDial component (https://material-ui.com/api/speed-dial/). At present, when a SpeedDialAction is clicked, the main SpeedDial component automatically closes. I want to modify this behavior s ...

Upon the initial rendering, Next.js obtains access to the query { amp: undefined }

When using Next.js 9.3, I encountered an issue where I needed to access the query on initial render and pass the result of the query to next/head in order to change the title and description of the page. The component is receiving the query from the useRo ...

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

"Troubleshooting issues with data loading using React's useEffect function

While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...

Inform the user that an error has occurred when attempting to perform an invalid

While using redux promise middleware for my front end, I am wondering about the correct status code to throw from my backend in case of an error. I know that I can use res.status(500).json(something), but is 500 the appropriate code for all types of erro ...

A guide to printing a web page within an ion-view container

I am currently utilizing the Ionic Framework for my web application. Each page within the app is displayed using ion-view. I have a requirement to display graphs and possibly save them as PDF files. Below is a snippet of my code: <ion-view title="Repo ...

Creating a form submission event through Asp.net code behind

Is there a way to change the onsubmit parameter of a form in an asp.net project, specifically from the master page code behind of a child page? I am interested in updating the form value so that it looks like this: <form id="form1" runat="server" onsu ...

When working with Typescript, an error may occur related to index types even though the constant object and its

I am struggling with understanding TypeScript, specifically when it comes to a problem I encountered. Hopefully, someone can shed some light on this for me. My issue revolves around a functional component that is responsible for displaying the correct com ...

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

Unable to set the cookie when using the fetch API

My node.js server is listening on port 3001. WITHIN THE REACT FILE On the login page component. fetch('http://localhost:3001/api/login',{ method:'POST', headers: { Accept: 'application/json', ...

Sorry, but React does not accept objects as valid children. Make sure the content you are passing is a valid React child element

I encountered an issue with rendering on a screen that involves receiving an object. The error message I received is as follows: Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection o ...

What steps should I take to make my Vue JS delete function operational?

As I work on developing my website, I've encountered some challenges. Being new to coding, I'm struggling with creating a functional delete user button. When I click delete, it redirects me to the delete URL but doesn't remove the entry from ...

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...