AngularJS中的自动刷新

时间:2015-06-17 05:25:11

标签: javascript angularjs asynchronous

在下面的代码中,在autorefresh上,计时器在发送所有查询时启动,但我希望计时器在所有ajax查询完成时启动。 我怎么能去做呢?

    $scope.autoRefresh = function(){
    $scope.running = !$scope.running;
    $scope.timeoutsec = 10;
    if($scope.running)
    {
        $scope.timer = setInterval($scope.refresh, 10000);
        $scope.count = $timeout($scope.countdown,1000);
    }
    else
    {
        clearInterval($scope.timer); 
        $timeout.cancel($scope.count);
    }
}

倒计时功能 -

    $scope.countdown = function(){

    $scope.timeoutsec = $scope.timeoutsec - 1;
    $scope.count = $timeout($scope.countdown, 1000);

}

刷新功能 -

    $scope.refresh = function(){
    // update function
    $scope.timeoutsec = 11;

}

编辑: 更新功能 -

    $scope.update() =function(){
        for(var i=0;i<cluster.length;i++)
        {
         var request = $.ajax(cluster[i]).success(function(data, status, headers, config)              
            {
                 // on success
            });
        }
        }

4 个答案:

答案 0 :(得分:0)

如果您正在使用xmlhttp请求,则必须将xhr.open()函数中的第三个参数设置为true。这将使请求同步,如下所示:

 xhr.open(method, url, true);

答案 1 :(得分:0)

以下是一些样板代码,供您查看如何完成。

(function() { 
    'use strict';

    angular.module('app')

        .controller('controller', function($scope, $http, $timeout, $q) {
            $scope.update = function () {

                // single request
                $http.get('url')
                    .then(function (data) {
                        $timeout($scope.update, 10000);
                    });

                // or with multiple requests
                var request1 = $http.get(/****/);
                var request2 = $http.get(/****/);
                var request3 = $http.get(/****/);

                $q.all([request1, request2, request3])
                    .then(function() {
                        $timeout($scope.update, 10000);
                    });
            }; 
        });
})();

答案 2 :(得分:0)

将$ scope.running初始化为false,仅在按下自动刷新按钮时才应设置为true。

angleMode = "degrees";

var Bird = function(m,x,y){
    this.mass = m;
    this.position = new PVector(x,y);
    this.velocity = new PVector(0,0);
    this.acceleration = new PVector(0,0);
};

Bird.prototype.applyForce = function(force) {
    var f = PVector.div(force, this.mass);
    this.acceleration.add(f);
};

Bird.prototype.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
    this.velocity.limit(3);
};

Bird.prototype.displayAndMoveWings = function() {
    this.start=-110;
    this.stop = this.start + 110;
    this.flyingFactor=cos(360+frameCount*this.velocity.mag()*10)*20;
    stroke(0, 0, 0);
    strokeWeight(2);
    noFill();
    arc(this.position.x,this.position.y,this.mass,this.mass,this.start-this.flyingFactor,this.stop-this.flyingFactor);
    arc(this.position.x+this.mass,this.position.y,this.mass,this.mass,this.start+this.flyingFactor-70,this.stop+this.flyingFactor-70);  
};

Bird.prototype.checkEdges = function() {

  if (this.position.x > width) {
    this.position.x = 0;
  } else if (this.position.x < 0) {
    this.position.x = width;
  }

  if (this.position.y > height) {
    this.position.y = 0;
  } else if (this.position.y < 0) {
    this.position.y = height;
  }
};

var bird1 = new Bird(15, width/2, height/2);

var draw = function() {
    background(255, 255, 255);
    bird1.update();
    bird1.displayAndMoveWings();
    var randomAcceleration = new PVector(random(-3,3),random(-3,3));
    bird1.checkEdges();
    bird1.applyForce(randomAcceleration);
};

自动刷新功能 -

geocoded_by :full_address
after_validation :geocode, :if => :address1_changed?

倒计时功能 -

    $scope.running = false;

刷新功能---

    $scope.autoRefresh = function(){
    $scope.running = !$scope.running;
    $scope.timeoutsec = 10;
    if($scope.running)
    {
        $scope.count = $timeout($scope.countdown,1000);
    }
    else
    {
        $timeout.cancel($scope.count);
    }
}

当所有功能 -

    $scope.countdown = function(){
    $scope.timeoutsec = $scope.timeoutsec - 1;
    if($scope.timeoutsec == 0)
    {
        $scope.refresh();
    }
    whenAll($scope.queries).done(function(){
    $scope.count = $timeout($scope.countdown, 1000);
});

将所有ajax查询推送到$ scope.queries。

答案 3 :(得分:0)

将所有$ http ajax推送到一个数组中,就像这样,因为$ http返回promises,你可以使用$ q API来处理所有请求的完成时间:

var httpPromises = [
    $http({method:'GET', url: '/myjson0.json'}),
    $http({method:'GET', url: '/myjson1.json'}),
    $http({method:'GET', url: '/myjson2.json'}),
    $http({method:'GET', url: '/myjson3.json'})
];


//handle your requests like you would normally do
httpPromises[0].success(...).fail(...);
httpPromises[1].success(...).fail(...);
httpPromises[2].success(...).fail(...);
httpPromises[3].success(...).fail(...);

// remember to inject $q in your controller/factory
$q.all(httpPromises,function(){
    //start your timer here
});

$q documentation