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

ending timeout function, with button click

  • February 6, 2021
  • 1 reply
  • 3803 views

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!

Best answer by sebben

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)

 

 

1 reply

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

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

S
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)

 

 

    Terms & ConditionsAccessibility statement