如何在AngularJS中利用Web Workers處理耗時操作以避免阻塞UI

在AngularJS中，利用Web Workers處理耗時操作可以避免阻塞UI，提高應用的響應性和性能。以下是使用Web Workers的步驟：

1. 創建一個Web Worker文件（例如：worker.js）：

self.onmessage = function(event) {
  var data = event.data;
  // 執行耗時操作
  var result = performLongRunningTask(data);
  // 將結果發送回主線程
  self.postMessage(result);
};

function performLongRunningTask(data) {
  // 在這里執行耗時操作，例如：數據處理、計算等
  return "處理結果";
}

2. 在AngularJS應用中創建一個Web Worker實例：

app.factory('WorkerService', function() {
  var worker;

  return {
    start: function() {
      worker = new Worker('worker.js');
      worker.onmessage = function(event) {
        // 處理Web Worker返回的結果
        console.log('從Web Worker接收到的數據:', event.data);
      };
      worker.onerror = function(error) {
        // 處理Web Worker中的錯誤
        console.error('Web Worker發生錯誤:', error);
      };
    },
    stop: function() {
      if (worker) {
        worker.terminate();
        worker = null;
      }
    }
  };
});

3. 在AngularJS控制器中使用WorkerService處理耗時操作：

app.controller('MyController', function($scope, WorkerService) {
  $scope.startWorker = function() {
    WorkerService.start();
    // 將數據發送給Web Worker
    WorkerService.worker.postMessage('需要處理的數據');
  };

  $scope.stopWorker = function() {
    WorkerService.stop();
  };
});

4. 在HTML中添加按鈕來觸發Web Worker的啟動和停止：

<div ng-controller="MyController">
  <button ng-click="startWorker()">啟動Web Worker</button>
  <button ng-click="stopWorker()">停止Web Worker</button>
</div>

通過以上步驟，你可以在AngularJS中利用Web Workers處理耗時操作，從而避免阻塞UI，提高應用的響應性和性能。