2013-06-25 4 views
2

Есть ли узоры в Угловых приложениях для сложных задач? (Помимо просто использования $ timeout с задержкой 0, чтобы позволить им выйти из стека вызовов?) Даже используя $ timeout, кажется, что пользовательский интерфейс не отвечает, когда сама обработка запускается. Должен ли я смотреть на веб-работников или что-то вроде что, или есть «Угловой способ»?AngularJS - Computation-Heavy Tasks

+1

Нет углового пути. Если вы настроите таргетинг только на браузеры, которые поддерживают веб-работников, тогда они являются опцией, но нет ничего угловатого, чтобы помочь с ними. –

+0

Спасибо! Я придумал способ решить мою отзывчивость по пользовательскому интерфейсу, создав специальные функции цикла, каждый раз использующие тайм-аут Angular $ через цикл. – blaster

ответ

2

Поскольку JavaScript является однопоточным, вам необходимо либо выполнить вычисления на стороне сервера, либо сделать таймауты между обработкой (см. defer(), ,,). В противном случае пользовательский интерфейс неизбежно будет заблокирован.

2

Я придумал способ решить мою отзывчивость по пользовательскому интерфейсу, создав специальные функции цикла, которые каждый раз через цикл используют Angular $timeout.

app.service('responsivenessService', function($q, $timeout) { 
    var self = this; 

    // Works like Underscore's map() except it uses setTimeout between each loop iteration 
    // to try to keep the UI as responsive as possible 
    self.responsiveMap = function(collection, evalFn) 
    { 
     var deferred = $q.defer(); 

     // Closures to track the resulting collection as it's built and the iteration index 
     var resultCollection = [], index = 0; 

     function enQueueNext() { 
      $timeout(function() { 
       // Process the element at "index" 
       resultCollection.push(evalFn(collection[index])); 

       index++; 
       if (index < collection.length) 
        enQueueNext(); 
       else 
       { 
        // We're done; resolve the promise 
        deferred.resolve(resultCollection); 
       } 
      }, 0); 
     } 

     // Start off the process 
     enQueueNext(); 

     return deferred.promise; 
    } 
    return self; 
}); 

Это отображение функция возвращает обещание, которое может быть отнесено к $scope. Использование похоже на map() функций из Underscore или родных массивов Javascript в новых браузерах:

$scope.results = responsivenessService.responsiveMap(initialdata, function() { 
    // Long-running or computationally intense code here 
    return result; 
}); 

код, который бы изначально заблокировал весь интерфейс теперь, кажется, работают в фоновом режиме (хотя по сути это иллюзия, как вызов приложения .DoEvents периодически в старых приложениях). Приятный и общий, если длинный код способствует работе с циклом() - стиль!