Question

96

Stopping the $timeout - AngularJS

rated 0 times [ 100] [ 4] / answers: 1 / hits: 37945 / 10 Years ago, sat, january 10, 2015, 12:00:00

var app = angular.module('myapp', []);



app.controller('PopupCtrl', function($scope, $timeout){

$scope.show = 'none';





  $scope.mouseover = function(){

    console.log('Mouse Enter');

    $scope.show = 'block';

  };



  $scope.mouseout = function(){



       console.log('Mouse Leave');

        var timer = $timeout(function () {

          $scope.show = 'none';

        }, 2000);





  };



});

When I mouseover a button, a pop up dialog box is show. When I mouseout, the pop up dialog box is going to be hidden in two seconds. The problem come when I mouseover the button for the second time. Even my cursor is still on the button, the pop up dialog box is hide in two second. How to stop the timer when the mouse is over the button again?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lara

Add To Favorites

Follow

Total Points: 462

Total Questions: 100

Total Answers: 102

Location: Jersey

Member since Mon, Jun 14, 2021

3 Years ago

lara questions

1 How to watch for multiple values in Vue 3 script setup?

Thu, May 19, 22, 00:00, 2 Years ago

1 chrome.runtime.OnMessage.addListener returns duplicate messages

Tue, Jul 27, 21, 00:00, 3 Years ago

1 Using try catch in watch of Vue.js

Thu, Apr 1, 21, 00:00, 3 Years ago

1 NodeJS 12 SyntaxError: Unexpected token 'export'

Mon, Jul 27, 20, 00:00, 4 Years ago

1 In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Tue, Mar 17, 20, 00:00, 4 Years ago

View All

answered 10 Years ago erinh · Accepted Answer

The $timeout service returns a promise that can be cancelled using $timeout.cancel(). In your case, you have to cancel the timeout in every button mouse over.

DEMO

JAVASCRIPT

var app = angular.module('myapp', []);



app.controller('PopupCtrl', function($scope, $timeout){

  var timer;

  $scope.show = false;



  $scope.mouseover = function(){

    $timeout.cancel(timer);

    $scope.show = true;

  };



  $scope.mouseout = function(){

    timer = $timeout(function () {

      $scope.show = false;

    }, 2000);

  };



});