0

Hi Im making a simple game using angular. It has various icons that when pressed change the icon next to them, and then changes it back after 1 second. I was using $timeout like this

html

<div class="row">
  <div class="col col-50"><img class = "img-responsive" ng-src = "{{img[0]}}{{ending}}" id = "one" ng-click="showCloud(0)"></div>
    <div class="col col-50"><img class = "img-responsive" ng-src = "{{img[1]}}{{ending}}" id = "two" ng-click="showCloud(1)"></div>
</div>

showCloud function:

$scope.img[nextId] = "img/cloud"+nextId; //change initial img

$timeout( function(){ $scope.img[nextId] = "img/pic"+nextId; }, 1000)`; //change back

but when i test it and push them all some dont change back to their original image. It usually happens when i push one right after the other and the first one is still waiting. Should these be in separate functions?

BTW this isnt bc of closure since it works most of the time

user718229
  • 524
  • 6
  • 20
  • 1
    Have you read this? - http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – twsaef Feb 02 '16 at 22:26
  • This is probably because `$timeout` is Angular's wrapper for `window.setTimeout`. Since it is attached to one object (here `window`), calling it before it ended may just reset it. Therefore, the previous calls made to it are lost. – Yann Lelong Feb 02 '16 at 22:32
  • @YannLelong unless you use `clearTimeout()` in native script for `setTimeout()` or `$timeout.cancel(timerId)` another timer is created and the other stays in place – charlietfl Feb 02 '16 at 23:03

0 Answers0