Форум

Самовар · #1 (**permalink**) 21.03.2018, 07:41

Дело вот в чем. Есть конструктор Tank, который в зависимоит от переданного параметра name создает два вида танков (Т34 и Тигр). Тигр выступает в качестве мишени, который Т34 расстреливает. При нажатии на кнопку "Атаковать" запускается цикл while, в котором пока Тигр не будет уничтожен танк Т34 ведет по нему огонь. Очки прочности Тигра отображаются в элементе div, который расположен рядом с картинкой Тигра. Вот функция атаки танка

Tank.prototype.attack = function(target) {
 if (target == Tiger){
    target.hp = target.hp - this.damage;
  tooltipElemTiger.innerHTML = target.hp;
  alert(this.name + " атаковал " + target.name);
  alert("Очков прочности " + target.name + target.hp + " единиц");
  if (target.hp <= 0) this.destroyed(target);}
};

По идее после каждого выстрела параметр InnerHTML должен обновляться и отображать количество оставшихся единиц прочности танка. НО он обновляется только ПОСЛЕ того, как Тигр уничтожен, а не после каждого выстрела. Сломал всю голову но так и непойму проблемы. Если в функции battle убрать цикл и просто несколько раз прописать функцию атаки, то всё работает корректно (див обновляет оставшуюся прочность после каждого выстрела). Значит проблема именно в циклическом выполнении функции.

Вот ссылка на кодпен, чтобы наглядно всё было видно. Не обращайте внимания, что не всё ровно, пока интересует только функциональная часть. https://codepen.io/Sergeev2/pen/qxLXzB

j0hnik · #2 (**permalink**) 21.03.2018, 08:04

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
document.body.style.backgroundColor = "red";
alert();
	</script>
</body>
</html>

Известная проблема

j0hnik · #3 (**permalink**) 21.03.2018, 08:07

Вместо while рекурсивный setTimeout и все заработает

Самовар · #4 (**permalink**) 21.03.2018, 08:19

А с чем связана такая непонятная работа скрипта? По идее команды должны выполняться одна за другой, а не как попало

ksa · #5 (**permalink**) 21.03.2018, 08:21

Сообщение от Самовар

По идее команды должны выполняться одна за другой

Они так и выполняются.

j0hnik · #6 (**permalink**) 21.03.2018, 08:24

Самовар,
Это не какая то ошибка языка, интерпретатор так настроен у хрома и браузеров сделанных на его основе.

Самовар · #7 (**permalink**) 21.03.2018, 08:24

в примере Жоника, сперва вывелся алерт, а потом изменился цвет. Как-то не очень одна за другой, если я правильно понял

ksa · #8 (**permalink**) 21.03.2018, 08:26

Сообщение от Самовар

По идее после каждого выстрела параметр InnerHTML должен обновляться и отображать количество оставшихся единиц прочности танка. НО он обновляется только ПОСЛЕ того, как Тигр уничтожен, а не после каждого выстрела.

Наверное твой скрипт "крутится" в одном потоке... И пока он не завершит работу никакого "обновления" страницы ты не увидишь.
Это хорошо видно на примере j0hnik.

Тебе нужно все изменения страницы "уводить" в другой поток.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
document.body.style.backgroundColor = "red";
setTimeout(function(){
   alert();
},1);
	</script>
</body>
</html>

ksa · #9 (**permalink**) 21.03.2018, 08:27

Сообщение от Самовар

в примере Жоника, сперва вывелся алерт, а потом изменился цвет.

Алерт обрабатывается именно так браузерами.

Самовар · #10 (**permalink**) 21.03.2018, 08:28

про криво работающт экплорер наслышан, но с гуглом думал всё нормально. То есть и для гугла нужно применять специфичекие приемы?

Форум

Справочник

Discord чат

Курсы javascript