FvB FvB - 1 year ago 70
AngularJS Question

Extend a $timeout

I've made a delete button that morphs into the confirm button, and effectively it requires you to click the button twice to call the delete method. If you only click the button once, and you wait 1 second, it goes back to it's default state.

I've done this using the $timeout directive, as follows:

$timeout(function () {
$timeout(setDefaults, scope.options.timeout);
}, 10);

The extra 10 millisecond delay is because my mouse sometimes randomly thinks a single click is a double click. The 10 millisecond delay is meant to be small enough to not allow unintended doubleclicks caused by faulty mouses, while being small enough to make sure a regular double click comes through (unless the uses clicks more than 100 per second, which is unlikely).

However, if the user clicks once and keep their mouse on the button, it will still morph back. I want the inner $timeout function to pause while the user is hovering over my button.

I can't find any built-in way of pausing a $timeout in the directive. Am I missing something? Any suggestions to a work-around maybe?


I used the following code to fix my problem:

scope.cancelCountdown = cancelCountdown;
scope.startCountdown = startCountdown;

function cancelCountdown() {

function startCountdown() {
$timeout(function () {
scope.timer = $timeout(setDefaults, 1000);
}, 10);

And then bound the methods to mouse-enter and mouse-leave.

<button id="confirm-button-{{id}}"

It's not exactly what I hoped for, but it works just fine!

Answer Source

Did you tried using ngMouseenter and ngMouseleave? You could increase the timeout time when the mouse is over, and put back 1 second when leave the button:


$scope.onMouseenter = function(){
    scope.options.timeout = 100000; // 100 seconds

$scope.onMouseleave = function(){
    scope.options.timeout = 1000; // 1 second


<button .... ng-mouseenter="onMouseenter()" ng-mouseleave="onMouseleave()">