我想在算法工作時在頁面顯示加載動畫。我如何使用角度承諾做到這一點?例如:顯示加載動畫,而慢算法工作AngularJS
<div ng-hide='algEnded' > Content to hide while alg. works</div>
<div ng-hide='!algEnded' > <img href='img/loading.svg'> </div>
我想在算法工作時在頁面顯示加載動畫。我如何使用角度承諾做到這一點?例如:顯示加載動畫,而慢算法工作AngularJS
<div ng-hide='algEnded' > Content to hide while alg. works</div>
<div ng-hide='!algEnded' > <img href='img/loading.svg'> </div>
對於耗時的任務,您可以使用Web Workers。
angular.module('myModule').service(myService);
function myService($q){
function calculate(){
return $q(function(resolve, reject){
var myWorker = new Worker("myTask.js");
myWorker.onmessage = function (e) {
resolve(e.data); //resolve promise when worker posts data
myWorker.terminate();
};
});
}
this.calculate = calculate;
}
angular.module('myModule').controller(MyController);
function MyController(myService){
var vm = this;
this.calculate = function(){
algEnded = false;
myService.calculate().then(function(){
algEnded = true;
});
}
}
修改HTML這樣的:
<div ng-controller="MyController as vm">
<div ng-hide='vm.algEnded' > Content to hide while alg. works</div>
<div ng-hide='!vm.algEnded' > <img href='img/loading.svg'> </div>
</div>
,並把你的算法myTask.js
function algorithm(){
return 1+1;
}
postMessage(algorithm());
所以,它可能使它與承諾異步?也許我不明白JS中的承諾「使命」?它是否爲耗時的任務而創建,並且不會阻止UI? –
Exacly,web worker中的任務將被異步執行,因此它不會阻塞UI,也不會顯示任何「Unresponsive Script」彈出窗口。 –
可以共享JS代碼? –
是的,但部分(這是太大) –
https://jsfiddle.net/yL8m822g/只是考試 - 它不工作 –