Skip to main content
10-Marble
March 10, 2020
Solved

How do I update a variable within $timeout?

  • March 10, 2020
  • 1 reply
  • 1440 views

I have a function within a $timeout to which I want to pass a variable called 'renderlevel'.

 

Later I want to update 'renderlevel' and for it to update within $timeout. Can someone advise me how to do this? 

 

var renderlevel = 0.2;

$timeout(function() {
for (i = 0; i < rLen; i++) {
$scope.view.wdg[renComponents[i]]['texture'] = "app/resources/Uploaded/MyImage.jpg?name=tex0&edge=repeat";
$scope.view.wdg[renComponents[i]]['shader'] = "reflect;mixer f " + renderlevel;
}
} ,50);

//Later...
renderlevel = 0.5;
//Update timeout??

Update: this is a lot simpler than I realised. This is my basic but functional solution:

 

//SHADER - runs at startup
$timeout(function() {
for (i = 0; i < rLen; i++) {
$scope.view.wdg[renComponents[i]]['texture'] = "app/resources/Uploaded/MyImage.jpg?name=tex0&edge=repeat";
$scope.view.wdg[renComponents[i]]['shader'] = "reflect;mixer f " + renderlevel;
}
} ,50);

//SHADER UPDATE - runs when called
$scope.shaderUpdate = function(){
$timeout(function() {
for (i = 0; i < rLen; i++) {
$scope.view.wdg[renComponents[i]]['texture'] = "app/resources/Uploaded/MyImage.jpg?name=tex0&edge=repeat";
$scope.view.wdg[renComponents[i]]['shader'] = "reflect;mixer f " + renderlevel;
}
} ,50);
}

//SHADER AMOUNT
$scope.shaderLevel = function(){
renderlevel = 0.5;
$scope.shaderUpdate();
}
Best answer by RolandRaytchev

Hi @rhudd ,

another possible way to call the update function on change is to use a $watch construct - something like this :

 

$scope.renderLevel=0.2;
...
...
////////////////
// here the definition of shaderUpdate...
$scope.shaderUpdate= function (renderLevel) {
console.log(" called shaderUpdate() with renderLevel =" + renderLevel)
console.log("call here your code using arg renderLevel")
}

/=============================================================
$scope.$watch('renderLevel', function (newValue, oldValue, scope) {
 // console.warn("called watch function with newValue=" +newValue+ " <=> oldValue was="+oldValue+ " <=> scope.renderLevel="+scope.renderLevel);
 //pay attention here is scope without $ !
 if(scope.renderLevel!= undefined) {
 scope.shaderUpdate(scope.renderLevel)
 $scope.$applyAsync();
 }
});

...
...
/// later in code
$scope.renderLevel=0.5;
//will call the update function 

 

This code will call also renderLevel for the 0.2 value on start

 

1 reply

21-Topaz I
March 11, 2020

Hi @rhudd ,

another possible way to call the update function on change is to use a $watch construct - something like this :

 

$scope.renderLevel=0.2;
...
...
////////////////
// here the definition of shaderUpdate...
$scope.shaderUpdate= function (renderLevel) {
console.log(" called shaderUpdate() with renderLevel =" + renderLevel)
console.log("call here your code using arg renderLevel")
}

/=============================================================
$scope.$watch('renderLevel', function (newValue, oldValue, scope) {
 // console.warn("called watch function with newValue=" +newValue+ " <=> oldValue was="+oldValue+ " <=> scope.renderLevel="+scope.renderLevel);
 //pay attention here is scope without $ !
 if(scope.renderLevel!= undefined) {
 scope.shaderUpdate(scope.renderLevel)
 $scope.$applyAsync();
 }
});

...
...
/// later in code
$scope.renderLevel=0.5;
//will call the update function 

 

This code will call also renderLevel for the 0.2 value on start

 

rhudd10-MarbleAuthor
10-Marble
March 11, 2020

Hi @RolandRaytchev,

 

Thank you - I've learnt something new! 

 

I'm still quite new to AngularJS so I really appreciate your input 🙂