Javascript 显示多个异步Ajax调用的等待Gif
我正在用AngularJS和一些jQuery插件制作一个页面，AngularJS控制器通过ajax异步调用一些servlet方法来初始化其模型。我想在第一个ajax调用开始时显示加载gif，在最后一个ajax调用结束时隐藏它 因为我不知道哪一个将是最后一个ajax调用完成，所以我不知道在哪里放置隐藏加载gif的指令。我如何实现这种行为 我想要的代码示例：Javascript 显示多个异步Ajax调用的等待Gif,javascript,jquery,ajax,angularjs,Javascript,Jquery,Ajax,Angularjs,我正在用AngularJS和一些jQuery插件制作一个页面，AngularJS控制器通过ajax异步调用一些servlet方法来初始化其模型。我想在第一个ajax调用开始时显示加载gif，在最后一个ajax调用结束时隐藏它 因为我不知道哪一个将是最后一个ajax调用完成，所以我不知道在哪里放置隐藏加载gif的指令。我如何实现这种行为 我想要的代码示例： myApp.controller("adminCtrl", function($scope, $http) { $scope.init
myApp.controller("adminCtrl", function($scope, $http) {
$scope.initData1 = function() {
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
$scope.initData2 = function() {
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
$scope.initData3 = function() {
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
initData1();
initData2();
initData3();
}
我希望您理解我的问题，并知道实现这一点的任何方法。如何：声明一个可以注册挂起任务的服务，然后声明它们已完成
myApp.factory('pendingService', [function () {
var pendingTasksCount = 0;
return {
anyPending: function () {
return pendingTasksCount > 0;
},
registerNewTask: function () {
pendingTasksCount += 1;
return function declareTaskDone() {
pendingTasksCount -= 1;
}
}
};
}]);
myApp.controller("adminCtrl", function($scope, $http, pendingService) {
// expose "any pending task" property in scope
$scope.showGif = pendingService.anyPending;
$scope.initData1 = function() {
var declareDone = pendingService.registerNewTask();
$http(...).success(function() {
// do stuff
// ...
declareDone();
});
};
$scope.initData2 = function() {
var declareDone = pendingService.registerNewTask();
$http(...).success(function() {
// do stuff
// ...
declareDone();
});
};
$scope.initData3 = function() {
var declareDone = pendingService.registerNewTask();
$http(...).success(function() {
// do stuff
// ...
declareDone();
});
};
initData1();
initData2();
initData3();
});
<img src="mygifurl" alt="loading" ng-show="showGif()"/>
如果您需要这种行为是本地的，而不是全局的，您可以使用同一个工厂来创建本地对象。查看进度条，它可以在发出http请求时显示进度。它基本上是一个http拦截器，跟踪http请求的数量，并相应地显示\隐藏进度条 如果要解决此特定场景，可以使用$q.all实现该行为。首先，对于所有init*函数，返回http承诺
$scope.initData1 = function() {
/* is this the first call? then show the gif */
var promise = $http(...);
promise.success(function(data) { // handle data});
return promise;
}
//show animation
$q.all([$sope.initData1(),$sope.initData2(),$sope.initData3()]).then(function(responseArray) {
//hide animation
})
myApp.controller("adminCtrl", function($scope, $http) {
$scope.initData1 = function() {
if($.active==0){
//this is the last active ajax request
}
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
$scope.initData2 = function() {
if($.active==0){
//this is the last active ajax request
}
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
$scope.initData3 = function() {
if($.active==0){
//this is the last active ajax request
}
/* is this the first call? then show the gif */
$http(...).success(function() { /* is this the last response received? then hide the gif */});
}
initData1();
initData2();
initData3();
}
我将使用ngClass来实现这一点，并使用一个计数器变量，例如
<html ng-app="testApp">
<head>
<style class="text/css">
.showing {
/* instead of this, you can add your gif here */
background: #f0f;
}
</style>
</head>
<body ng-controller="TestController">
<div class="test" ng-class="{'showing': count > 0 && count < 3}">
Count: {{count}}
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
(function() {
var testApp = angular.module("testApp", []);
testApp.controller("TestController", function($scope) {
$scope.count = 0;
var timeout = function(t) {
// this represents your ajax callbacks
setTimeout(function() {
$scope.$apply(function() {
$scope.count = $scope.count + 1;
});
}, t * 1000);
};
timeout(1);
timeout(2);
timeout(3);
});
})();
</script>
</body>
</html>
.展示{
/*您可以在此处添加gif，而不是此选项*/
背景：#f0f；
}
计数：{{Count}
（功能（）{
var testApp=angular.module（“testApp”，[]）；
testApp.controller（“TestController”，函数（$scope）{
$scope.count=0；
变量超时=函数（t）{
//这表示您的ajax回调
setTimeout（函数（）{
$scope.$apply（函数（）{
$scope.count=$scope.count+1；
});
}，t*1000）；
};
超时（1）；
超时（2）；
超时（3）；
});
})();
您需要修改$scope.$apply函数上下文中的作用域（在此特定示例中），否则视图将不会更新（有关发生此情况的原因的详细信息，请参阅：）。如果使用Promissions，您可能可以避免这个问题，但我相信使用ngClass是修改视图的角度方法。如果这样做有效，惯用的角度方法应该是在IMHO范围内公开$.active属性。我更喜欢角度相关的解决方案，而不是jquery相关的解决方案，因为我只对一些插件使用jQuery，并管理angularjs中的所有控制器逻辑。另外，jQuery是如何识别angularjs ajax帖子的？在这种情况下，我假设我应该保留一个
countregisterNewTask（）declareDone（）