Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 及时更新angular代码以随机调用api_Javascript_Angularjs_Node.js - Fatal编程技术网

Javascript 及时更新angular代码以随机调用api

Javascript 及时更新angular代码以随机调用api,javascript,angularjs,node.js,Javascript,Angularjs,Node.js,我有下面的代码,它调用了一个api,该api返回一种颜色,然后它在一个方框网格上呈现颜色 然而,它太快了,即使有5个服务器集群,我也会遇到异常,这是我试图构建的一个服务结构演示 它将调用500次服务,然后等待随机毫秒数,然后再次调用500次api 我希望每套500也随机计时,以使演示成功,而不必服务下降 angular.module('colorApp',[]) .controller('ColorController',['$http', function($http){

我有下面的代码,它调用了一个api,该api返回一种颜色,然后它在一个方框网格上呈现颜色

然而,它太快了,即使有5个服务器集群,我也会遇到异常,这是我试图构建的一个服务结构演示

它将调用500次服务,然后等待随机毫秒数,然后再次调用500次api

我希望每套500也随机计时,以使演示成功,而不必服务下降

angular.module('colorApp',[])
    .controller('ColorController',['$http', function($http){

        var vm = this;
        vm.blocks = [];

        for(var i=0;i<500; i++){
            var block ={
                updateColor: updateColor
            };

            block.updateColor(block);
            vm.blocks.push(block);
        }

        vm.blocks.forEach(function(block){
            var interval = Math.floor((Math.random()*5000)+1);
            //var interval = 5000;
            setInterval(function(){
                block.updateColor(block);
            }, interval)

        });

        function updateColor(item){
            $http({
                method: 'GET',
                url: 'http://demo.eastus.cloudapp.azure.com/api/color'
            }).then(function (response){
                item.color= response.data;
            })
        }


    }]);

<!doctype html>
<html ng-app="colorApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="script.js"></script>
    <style>
        body{
            margin:0
        }
        .block{
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0px;
            margin-top: -5px;
            border: solid 1px #ffffff;

        }
    </style>
</head>
<body ng-controller="ColorController as vm">
    <div ng-repeat="block in vm.blocks" class="block" ng-style="{'background-color':block.color}"></div>

</body>
angular.module('colorApp',[])
.controller('ColorController',['$http',函数($http){
var vm=这个;
vm.blocks=[];

对于(var i=0;i,如果您不希望的是每个http调用的执行延迟,那么您可以简单地将其包装为超时

...

setInterval(function(){
  delayedUpdateColor(block);
}, interval);

...

function delayedUpdateColor(block) {
  var timeout = Math.floor((Math.random()*5000)+1); // choose your range...

  setTimeout(function() {
    block.updateColor(block);
  }, timeout);
}

现在,您直接发出500个请求,然后为每个请求设置0-5秒的随机间隔,这是您想要的吗?如果是,您希望在每个api rest调用之间添加一个随机延迟的确切位置