Can we update $timeout in AngularJS?

Question

Following is what I'm trying to do. When the first timeout is forcibly cancelled, I want to initiate the second timeout function, without the lag that already exists, had the timeout not been cancelled.

$scope.data1_timeout = $timeout(function() {
  // some action
}, 2000);

$scope.data2_timeout = $timeout(function() {
  // some action
}, 4000);

$scope.show = function() {
  if (some action) {
    $timeout.cancel($scope.data1_timeout); //works perfectly fine
    //But how do I update data2_timeout so that the action inside it occurs just after data1_timeout is cancelled in this block.
  }
}

Do you mean if the 2000ms timer is cancelled, you want to call the 4000ms timer's callback function, but immediately? — tavnab
– tavnab, Commented Aug 28, 2017 at 16:32

lin · Accepted Answer · 2017-08-28 20:50:34Z

1

Easy doing by cancel both $timeout's and call your function manually. Keep it simple =).

$scope.data1_timeout = $timeout(function() {
  // some action
}, 2000);

$scope.data2_timeout = $timeout(function() {
  myAction();
}, 4000);

$scope.show = function() {
  if (some action) {
    $timeout.cancel($scope.data1_timeout);
    $timeout.cancel($scope.data2_timeout);
    myAction();
  }
}

function myAction () {
  console.log('done');
}

edited Aug 28, 2017 at 20:50

answered Aug 28, 2017 at 16:31

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

tavnab Over a year ago

Better yet, why not declare myAction at the top and make it the 2nd timer's callback?

lin Over a year ago

@tavnab 1) No need to declare on top. This doesn't make sense at all. 2) Timers don't have a callback, $timeout's uses promises. Please read the doc -> docs.angularjs.org/api/ng/service/$timeout.

tavnab Over a year ago

1) It's clearer to declare it at the top for readability, so you know what you're calling. 2) I'm sorry if I wan't clear. What I meant was that you can just do $scope.data2_timeout = $timeout(myAction, 4000); with no need for the extra wrapping function.

ste2425 Over a year ago

Timers do have a callback, the callback is what's executed after the elapsed time. The promise is what is returned.

lin Over a year ago

@Siena this is not possible.

|

JC Ford · Accepted Answer · 2017-08-28 16:55:59Z

This uses the promise returned by $timeout which gets rejected when the $timeout is canceled. The catch handler rejects the second timer and performs its actions immediately.

$scope.data1_timeout = $timeout(function() {
  // some action
}, 2000);

$scope.data2_timeout = $timeout(function() {
  // some action
}, 4000);

$scope.data1_timeout.catch(function(){
    $timeout.cancel($scope.data2_timeout);
    //same actions here as in data2_timeout
})

It'd make more sense to encapsulate the data2_timeout functionality in a named function and call it from both places like so:

$scope.data1_timeout = $timeout(function() {
  // some action
}, 2000);

function someAction2() {
    //some action
}

$scope.data2_timeout = $timeout(someAction2, 4000);

$scope.data1_timeout.catch(function(){
    $timeout.cancel($scope.data2_timeout);
    someAction2();
})

Note: If the intent is for data2 actions to wait for data1_timeout to complete or be canceled, then instead of data2 being a timeout, just add it as a .finally() callback for the data1_timeout promise.

$scope.data1_timeout = $timeout(function() {
  // some action
}, 2000);

$scope.data1_timeout.finally(function() {
  // do data2 stuff here.
  // Guaranteed to run, after data1_timeout completes or is canceled.
});

Collectives™ on Stack Overflow

Can we update $timeout in AngularJS?

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related