“броски кубиков” происходят бесконечно

108
26 апреля 2018, 09:40

Этот код имитирует бросок 2 кубиков. В зависимости от того, что на них выпало, увеличивается height соответствующего блока. Таким образом хотел получить кривую распределения, задавая количество бросков через i в цикле. setInterval использовал, чтобы задать временной промежуток между бросками

var height2 = 0;
var height3 = 0;
var height4 = 0;
var height5 = 0;
var height6 = 0;
var height7 = 0;
var height8 = 0;
var height9 = 0;
var height10 = 0;
var height11 = 0;
var height12 = 0;
function startFunction() { 
  var x = Math.floor(Math.random() * 6) + 1;
  var y = Math.floor(Math.random() * 6) + 1;
  var z = x+y;
  if (z==2) {  
  height2 += 0.1;
  document.getElementById("column2").style.height =  height2 + "px";
  }
  else if (z==3) {  
  height3 += 0.1;
  document.getElementById("column3").style.height =  height3 + "px";
  }
  else if (z==4) {  
  height4 += 0.1;
  document.getElementById("column4").style.height =  height4 + "px";
  }
  else if (z==5) {  
  height5 += 0.1;
  document.getElementById("column5").style.height =  height5 + "px";
  }
  else if (z==6) {  
  height6 += 0.1;
  document.getElementById("column6").style.height =  height6 + "px";
  }
  else if (z==7) {  
  height7 += 0.1;
  document.getElementById("column7").style.height =  height7 + "px";
  }
  else if (z==8) {  
  height8 += 0.1;
  document.getElementById("column8").style.height =  height8 + "px";
  }
  else if (z==9) {  
  height9 += 0.1;
  document.getElementById("column9").style.height =  height9 + "px";
  }
  else if (z==10) {  
  height10 += 0.1;
  document.getElementById("column10").style.height =  height10 + "px";
  }
  else if (z==11) {  
  height11 += 0.1;
  document.getElementById("column11").style.height =  height11 + "px";
  }
  else {  
  height12 += 0.1;
  document.getElementById("column12").style.height =  height12 + "px";
  };
  };
function cubesRandom () {
  for (i=0; i<5; i++) {
    setInterval (startFunction, 1000);
  };
  };
Answer 1

Чтобы код выполнялся заданное количество раз с заданным промежутком временем между итерациями, можно действительно использовать функцию setInterval, но задавать стоит только один интервал, а также вовремя его останавливать с помощью функции clearInterval.

Также стоит отказаться от множества переменных высоты в пользу массива, либо вообще считать высоту элемента от текущей.

function cubesRandom(count) { 
  var columns = document.getElementsByClassName("column"); 
  var iteration = 0; 
  var intervalId; 
   
  function generateAndShowValue() { 
    iteration++; 
    if (iteration > count) { 
      clearInterval(intervalId); 
      return; 
    } 
    var first = Math.floor(Math.random() * 6); 
    var second = Math.floor(Math.random() * 6); 
    var value = first + second; 
    columns[value].style.height = (columns[value].clientHeight + 5) + "px"; 
  } 
   
  intervalId = setInterval(generateAndShowValue, 10); 
} 
 
cubesRandom(300);
div { 
  border: 1px solid; 
  width: 20px; 
  height: 20px; 
  display: inline-block; 
}
<div class="column">2</div> 
<div class="column">3</div> 
<div class="column">4</div> 
<div class="column">5</div> 
<div class="column">6</div> 
<div class="column">7</div> 
<div class="column">8</div> 
<div class="column">9</div> 
<div class="column">10</div> 
<div class="column">11</div> 
<div class="column">12</div>

Answer 2
function cubesRandom() {
  for (var i = 0; i < 5; i++) {
    setTimeout(startFunction, 500 * (i + 1));
  }
}
cubesRandom();
READ ALSO
Хранения дат и часовые пояса

Хранения дат и часовые пояса

У меня в базе данных храниться дата добавления какого-либо объекта,причем,храниться она в формате UNIXПользователь видит дату в формате (День-месяц-год),...

193
Передача данных методом POST через header

Передача данных методом POST через header

Делаю редирект на страничку:

192
Laravel правильная выборка данных

Laravel правильная выборка данных

Всем привет! Есть не разрешенный по LARAVEL, а конкретно выборка данных из БД, уже 2 дня над этой проблемой бьюсь=((( Как выбрать из БД данные за текущий...

171
Ошибка &ldquo;Warning: preg_match(): Compilation failed: nothing to repeat at offset 0 &rdquo;

Ошибка “Warning: preg_match(): Compilation failed: nothing to repeat at offset 0 ”

Прошу помощи с регулярными выражениямиРешаю квест по PHP и столкнулся с такой проблемой

169