Skip to main content
DF_97037951-Visitor
1-Visitor
February 6, 2021
Solved

ending timeout function, with button click

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!

sebbenAnswer
14-Alexandrite
February 8, 2021

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)

 

 

View in thread

5 replies

dsgnrClarK16-Pearl
16-Pearl
February 8, 2021

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.

Translate
DF_97037951-VisitorAuthor
1-Visitor
February 8, 2021

@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.

Translate
sebben14-AlexandriteAnswer
14-Alexandrite
February 8, 2021

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)

 

 

Translate
    Terms & ConditionsAccessibility statement