2017-02-22 25 views
0

У меня есть следующий код, который вызывает 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> 

enter image description here

+0

прямо сейчас вы сразу же отправляете 500 запросов, а затем устанавливаете случайный интервал 0-5 секунд для каждого запроса, это то, что вы намеревались? и если да, то где именно вы хотите добавить случайную задержку? –

+0

между каждым вызовом вызова api –

ответ

1

Если то, что вы wan't задержка в исполнении для каждого 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); 
}