LINUX.ORG.RU

Как оптимизировать angularjs + php progress bar

 , ,


0

1

При прокрутке заметно притормаживает браузер.

'use strict';

angular.module('app').controller('RunController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
	
	$scope.run = function (feedId) {
		$http.post('ajax/run/run.php', {
			feeds:{feedId : true}
		}).then(function (response) {
			$scope.reload();
		});
	};
	
	var promise = null;
	$scope.$on('$destroy', function () {
		if (promise !== null) $timeout.cancel(promise);
	});
	$scope.reload = function () {
		$http.get('ajax/run/progress.php').then(function (response) {
			if (response.data.error === undefined) {
				
				$scope.feeds = response.data.feeds;
				
			}
			promise = $timeout($scope.reload, 3000);
		}, function (response) {
			promise = $timeout($scope.reload, 3000);
		});
	}
	$scope.reload();
	
}]);
<div class="container-fluid" style="text-align: center;">
	<h2>
		Run
		&nbsp;
		<a ng-if="!reloadInProgress" ng-click="reload()"><span class="glyphicon glyphicon-refresh" style="font-size:0.6em;"></span></a>
	</h2>
	
	<div id="run-table" style="width: 90%; display: inline-block; text-align: left; position: relative;">
		
		<ul style="list-style-type: none;">
			<li ng-repeat="feed in feeds | orderBy:'name'">
				<a ng-show="feed.status==='stopped'" ng-click="run(feed._id)"><span class="glyphicon glyphicon-play"></span></a>
				<a ng-show="feed.status==='running'" ng-click="stop(feed._id)"><span class="glyphicon glyphicon-stop"></span></a>
				<label>
					<input type="checkbox" />
					{{feed.name}}
				</label>
				<div class="progress" ng-show="feed.status==='running'"><div class="progress-bar" ng-style="{'width': feed.progress + '%'}">{{feed.progress}}%</div></div>
				<ul ng-show="feed.subfeeds" style="list-style-type: none;">
					<li ng-repeat="subfeed in feed.subfeeds | orderBy:'name'">
						<label>
							<input type="checkbox" />
							{{subfeed.name}}
						</label>
						<div class="progress" ng-show="subfeed.status==='running'"><div class="progress-bar" ng-style="{'width': subfeed.progress + '%'}">{{subfeed.progress}}%</div></div>
					</li>
				</ul>
			</li>
		</ul>
		
	</div>
		
</div>

Возможно ли как то оптимизировать? Server-side написан на PHP так что с socket.io наверное не удастся сделать. Там много кода на PHP.


Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.