Stop a setTimeout function in AngularJS (hint: use $timeout)

Question

I'm making a quiz-type app in which, when user gets a question, a timer of 10 seconds goes like this:

$scope.timer2 = function() {
    setTimeout(function() {
        console.log('times up!!!!');
    }, 10000)
}

and it is being called when a question arrives like this:

timerHandle = setTimeout($scope.timer2());

And after this timer2 execution another question pops up and so on, another way of a question being popped up is that the user selects an option also then a new question comes up. So far so good but the problem is that if suppose 5 seconds were passed and then user selects an option, the "timer2" still shows "times up!!" after 5 more seconds and another timer for the new question also shows "times up!!" if the user hasn't selected any option.

What I'm trying to say is that I want the timer2 to stop when user selects any option, and then i want again this timer to be called as a new question will arrive. This is the angular code which executes when user selects an option:-

 $scope.checkanswer=function(optionchoosed){
            $http.get('/quiz/checkanswer?optionchoosed='+ optionchoosed).then(function(res){
                if(res.data=="correct"){
                    $scope.flag1=true;
                    $scope.flag2=false;

                }else{
                    $scope.flag2=true;
                    $scope.flag1=false;
                }
                $http.get('/quiz/getquestions').then(function(res){
                console.log("respo");
                $scope.questions=res.data;
                clearTimeout($scope.timerHandle);  //not working
                timerHandle = setTimeout($scope.timer2());

I edited your question because you asked for AngularJS, but your problem is really generical. — Davide Cannizzo
– Davide Cannizzo, Commented Dec 29, 2017 at 10:26

Kabachok · Accepted Answer · 2017-12-29 10:53:52Z

2

You can try using the service of AngularJS $timeout. Then do something along these lines:

var myTimer = $timeout(function(){
                console.log("hello world")
             }, 5000);

     ....
$timeout.cancel(myTimer);

edited Dec 29, 2017 at 10:53

answered Dec 29, 2017 at 10:34

Kabachok

6032 gold badges8 silver badges22 bronze badges

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

3 Comments

Asim Over a year ago

Much thanks :) I still don't know what was the cause but it worked like a charm.

Kabachok Over a year ago

Glad it helped:)

georgeawg Over a year ago

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. The $timeout service is the AngularJS wrapper for setTimeout.

Davide Cannizzo · Accepted Answer · 2017-12-29 10:25:06Z

1

Take a look at the MDN documentation for setTimeout.
As you can see, that function returns a unique identifier. At this point, you can call clearTimeout passing that UID as parameter:

let myTimeout = setTimeout(myFunction, millis); //Start a timeout for function myFunction with millis delay.
clearTimeout(myTimeout); //Cancel the timeout before the function myFunction is called.

answered Dec 29, 2017 at 10:25

Davide Cannizzo

3,1641 gold badge31 silver badges35 bronze badges

6 Comments

Asim Over a year ago

I am using clearTimeout(timerHandle) above but the function doesn't stop. It has been called before but isn't stopping.

Davide Cannizzo Over a year ago

The problem is that you set timerHandle just after the calling of clearTimeout(timerHandle).

Asim Over a year ago

but then again it should stop the first one and then execute the second one, right na?

Davide Cannizzo Over a year ago

Can you take a look at the console and say me for eventual errors? I'm suspicious about the calling to clearTimeout: at first of all timerHandle is never set. It would cause an error.

Asim Over a year ago

Lol there is no error in console the timer is being set and prints up "times up!" after 10 secs.

|

andy · Accepted Answer · 2017-12-29 10:35:51Z

0

Since you do not provide working example let me do the best guess. Your function does not return handle from inner setTimeout so it cannot be cancelled. What about such modifications:

$scope.timer2 = function() {
    return setTimeout(function() {  // added return statement
        console.log('times up!!!!');
    }, 10000)
}

and then

timerHandle = $scope.timer2(); // simply call timer2 that returns handle to inner setTimeout

answered Dec 29, 2017 at 10:35

andy

8076 silver badges15 bronze badges

Collectives™ on Stack Overflow

Stop a setTimeout function in AngularJS (hint: use $timeout)

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related