ending timeout function, with button click

[DF_9703795]

Hi everyone,

i am still a rookie with JavaScript and I think this is not that difficult, but i can't find a solution.

I have an Animation, where I want to make some labels visible after some time (4.5 sec and 6.5sec) at Step 2, I use this code, which works fine:

$scope.widgets_playStarted = function(){
  if($scope.view.wdg['model-1']['currentStep'] == 2){
     $timeout(function(){
        $scope.view.wdg["label_1"].visible = true;
     }, 4500)

     $timeout(function(){
       $scope.view.wdg["label_2"].visible = true;
     }, 6500)

  }

I also have a Stop-Button. With this I want to stop the animation, but I can't stop the timeout function. So when I click "Stop" the animation stops but the label still gets visible after the 4.5 and 6.5 seconds.

So how do I also cancel the timeout function with the click on the Stop button?

Thank you very much!

[dsgnrClarK]

Hi, @DF_9703795 

$timeout would only be executed ONCE each time it is called. And then Stop.

Base on your code, There is no need to cancel $timeout that already stopped.

Nevertheless, those Labels could be hidden by the function below, immediately.

$scope.hideLabels = function(){
  $scope.view.wdg["label_1"].visible = false;
  $scope.view.wdg["label_2"].visible = false;
}

 Add hideLabels() to JS Click Events of Stop Button, it should be work out fine.

[DF_9703795]

@dsgnrClarK thanks for your reply.

The problem is that if I press "stop" with this function inside after the labels are visible so after the 6.5sec it works fine, but if i press stop before the labels are visible. The timeout function will still make them visible after the 6.5sec.

$scope.hideLabels = function(){
  $scope.view.wdg["label_1"].visible = false;
  $scope.view.wdg["label_2"].visible = false;
}

 Please take a look on the video I attached. When I press "X" the labels that are already visible, get hidden but after I press "X" the other labels shouldn't get visible anymore. So for that I need to stop the timeout-Function.

[sebben · Accepted solution]

Hi,

you  can put an additional if statement in your timeout function like this:

$timeout(function(){
  if($scope.view.wdg['model-1']['playing'] == true){
        $scope.view.wdg["label_1"].visible = true;
     }
  }, 4500)

[dsgnrClarK]

Sorry I got it wrong.

Then clearTimeout() would be an answer for it.

[Boopathy]

hi dsgnrClarK 

sorry I don't know how to use clearTimeout() can you please share the example