refactor(AutoResize): Avoid excessive $digests

Using $timeout for the loop to check whether the grid dimensions have
changed or not is causing a $digest() loop every 250ms. This can cause
quite a lot of slow-down in a large grid.

Changing to explicitly calling $apply() within a setTimeout() when the
dimensions have changed should fix this. The tests have been updated to
use Jasmine's async features to cover this alteration.

Fixes #2284. Fixes #2247

src/features/auto-resize-grid/js/auto-resize.js

@@ -28,24 +28,26 @@
         // Initialize the dimensions
         getDimensions();
 
-        var canceler;
+        var resizeTimeoutId;
         function startTimeout() {
-          $timeout.cancel(canceler);
+          clearTimeout(resizeTimeoutId);
 
-          canceler = $timeout(function () {
+          resizeTimeoutId = setTimeout(function () {
             var newGridHeight = gridUtil.elementHeight($elm);
             var newGridWidth = gridUtil.elementWidth($elm);
 
             if (newGridHeight !== prevGridHeight || newGridWidth !== prevGridWidth) {
               uiGridCtrl.grid.gridHeight = newGridHeight;
               uiGridCtrl.grid.gridWidth = newGridWidth;
 
-              uiGridCtrl.grid.refresh()
-                .then(function () {
-                  getDimensions();
+              $scope.$apply(function () {
+                uiGridCtrl.grid.refresh()
+                  .then(function () {
+                    getDimensions();
 
-                  startTimeout();
-                });
+                    startTimeout();
+                  });
+              });
             }
             else {
               startTimeout();
@@ -56,7 +58,7 @@
         startTimeout();
 
         $scope.$on('$destroy', function() {
-          $timeout.cancel(canceler);
+          clearTimeout(resizeTimeoutId);
         });
       }
     };

src/features/auto-resize-grid/test/auto-resize-grid.spec.js

@@ -1,4 +1,4 @@
-describe('ui.grid.autoResizeGrid', function () {
+ddescribe('ui.grid.autoResizeGrid', function () {
   var gridScope, gridElm, viewportElm, $scope, $compile, recompile, uiGridConstants;
 
   var data = [
@@ -44,13 +44,17 @@ describe('ui.grid.autoResizeGrid', function () {
       var w = $(viewportElm).width();
       var h = $(viewportElm).height();
 
-      $(gridElm).width(600);
+      runs(function () {
+        $(gridElm).width(600);
+      });
 
-      $timeout.flush();
+      waits(300);
 
-      var newW = $(viewportElm).width();
+      runs(function () {
+        var newW = $(viewportElm).width();
 
-      expect(newW).toBeGreaterThan(w);
+        expect(newW).toBeGreaterThan(w);
+      });
     }));
   });
 
@@ -75,13 +79,17 @@ describe('ui.grid.autoResizeGrid', function () {
       var w = $(viewportElm).width();
       var h = $(viewportElm).height();
 
-      $(gridContainerElm).width(500);
+      runs(function () {
+        $(gridContainerElm).width(500);
+      });
 
-      $timeout.flush();
+      waits(300);
 
-      var newW = $(viewportElm).width();
+      runs(function () {
+        var newW = $(viewportElm).width();
 
-      expect(newW).toBeGreaterThan(w);
+        expect(newW).toBeGreaterThan(w);
+      });
     }));
   });