Question

我有以下代码调用一个返回颜色的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>

Answer 1

如果你想要的是每个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);
}

更新角度代码以及时随机调用api

1 个答案: