AngularJS $timeout in for loop generates wrong values

Question

I add some items in the for loop with $timeout to see the animation. It works, but I see wrong values in the <li> items:

$scope.list = [{ id : 1},{ id : 2},{ id : 3},{ id : 4},{ id : 5},{ id : 6}];

for (var i = 0; i < $scope.myItems.length; i++) {
   var x = $scope.myItems[i];

   $log.log(x.id);

   $timeout(function () {
      $scope.list.push({ name: x.id });
   }, 100 * i);
};

<ul class="item-container">
  <li class="item" ng-class="animation" ng-repeat="item in list">{{item.name}}</li>
</ul>

firebug displays:

but in the <ul> tag all <li> items have 6 as a value. Why ?

Mathew Berg · Accepted Answer · 2014-11-28 14:52:59Z

3

Since timeout is on a delay, you'll have to wrap it in a closure so that the "x" is the right one:

for (var i = 0; i < $scope.myItems.length; i++) {
   var x = $scope.myItems[i];
   (function(x){

       $log.log(x.id);

       $timeout(function () {
          $scope.list.push({ name: x.id });
       }, 100 * i);
   })(x);
};

This is because the x continously gets overwriten via x = $scope.myItems[i]. By the time the timeout fires the x has changed to the last one.

answered Nov 28, 2014 at 14:52

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS $timeout in for loop generates wrong values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related