Блог

Главная - Вопросы по программированию - Как отобразить изображение во время обработки AngularJS в памяти

Как отобразить изображение во время обработки AngularJS в памяти

#javascript #angularjs #ng-grid

#javascript #angularjs #ng-grid

Вопрос:

Я новичок в JS, поэтому, пожалуйста, простите мое невежество. У меня есть приложение AngularJS со страницей, которая содержит данные в памяти. Страница дает пользователю возможность фильтровать данные, которые затем заполняются в таблицу ng-grid. Как бы вы отображали изображение (например, счетчик) в то время, когда JS обрабатывает данные в памяти? Это то, что я пробовал:

HTML:

 <button ng-click="loadingTable()">View</button>
<img ng-show="loading" src="../images/loading.gif" />

<div class="gridStyle" ng-grid="gridOptions"></div>

JS:

 $scope.loadingTable = function() {

    $scope.loading = true;

    loadTable();

    function loadTable() {

    };

    $scope.loading = false;

};

Комментарии:

1. Вам нужно установить для вашей загрузки значение false внутри функции loadTable после установки данных. Javascript является асинхронным.

2. @BenFelda — Javascript по умолчанию не является асинхронным. Однако он однопоточный, поэтому, если вы явно не выполните операцию асинхронно, вы заблокируете пользовательский интерфейс.

3. Даже когда я устанавливаю для loading значение false внутри функции loadTable, изображение никогда не появляется. Когда я закомментирую loading = false, изображение не отображается до тех пор, пока данные уже не будут обработаны и отображены.

4. @kimli — Это потому, что вы, скорее всего, обрабатываете данные синхронно, и поэтому у цикла $digest не будет возможности выполнить обновление пользовательского интерфейса. Вам нужно будет использовать службу $timeout для асинхронной постановки вашей операции в очередь, а затем использовать возвращенное обещание, чтобы установить loading = false , когда это будет сделано.

Ответ №1:

Я не вижу весь ваш пример, но я предполагаю, что вы синхронно выполняете операцию с привязкой к вычислениям внутри этой функции.

Проблема в том, что это заблокирует поток пользовательского интерфейса, и цикл $digest не будет выполняться до его завершения. Это приведет к тому, что индикатор загрузки фактически никогда не будет отображаться, потому что он будет установлен на true , а затем на false перед $digest запуском.

Конечный эффект заключается в том, что экран на некоторое время зависает, а затем появляется, как будто ничего не произошло.

Вы можете выполнить операцию асинхронно, используя $timeout сервис:

 $scope.loadingTable = function() {

    $scope.loading = true;

    $timeout(function(){
       loadTable();
    }).then(function(){
       $scope.loading = false;   
    });

    function loadTable() {

    };
};

Вот простая демонстрация этой концепции: http://jsfiddle.net/jwcarroll/z7838 /