Почему зависает сайт?

Question

[DimaD0106d]

let st = false

const time = () => {
	body.style.background = 'red'
	setInterval(() => {
		body.style.background =  'gray'
	}, 500)
}

bt2.onclick = function(){
	bt2.style.display = 'none'
	p3.style.display = 'none'
	img3.style.display = 'block'
	p4.style.display = 'block'
	st = true

	do{
		time()
	} while(st == true)

}

Comments

[edward_freedom]

ты тысячи раз в сек вызываешь setInterval

[y0u]

Почитать и вникнуть:
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[DimaD0106d]

y0u, блин, я указал while(i < 1000), все ровно зависает( Скажи как нужно чтобы я понял

[edward_freedom]

DimaD0106d, убери вообще цикл

[DimaD0106d]

edward_freedom, ну как??? Я не могу ни как((((((((( Я пробую и так:

bt2.onclick = function(){
  bt2.style.display = 'none'
  p3.style.display = 'none'
  img3.style.display = 'block'
  p4.style.display = 'block'

    for (i = 0; i < 20; i++;){
    	body.style.background = 'red'
    	body.style.background = 'gray'
  }
}

Ни че не выходит, оно зависает, я уже указал уже что пока i меньше 20 выполнять красный, серый, какого фига оно зависает??

[DimaD0106d]

edward_freedom, Кароче я тупо сделал так:

body.style.background = 'gray'
  setTimeout(() =>{
  	body.style.background = 'red'
  }, 500)

    setTimeout(() =>{
  	body.style.background = 'blue'
  }, 1500)

      setTimeout(() =>{
  	body.style.background = 'yellow'
  }, 2500)
}

[Vlad]

DimaD0106d, вот последний код уже лучше чем это:

body.style.background = 'red'
body.style.background = 'gray'

грубо говоря, там написано поставить красный и тут же серый фон, без задержки. А последний код четко говорит: через .Х время установить Y цвет.
Но Алексей Дубровин написал, правильнее (если конечно не нужно через разные промежутки времени менять цвета)

Answer 1

[Алексей Дубровин]

Попытался сделать максимально простой пример.

let color = ['red','blue'];
let colorIteraion = 0;
function colorFunction(){
if ( colorIteraion >= color.length) colorIteraion = 0;
    document.body.style.background = color[colorIteraion];
    colorIteraion++;
}
setInterval(colorFunction,500);

Comments

[DimaD0106d]

А что значит color.length?

[Vlad]

DimaD0106d, есть массив, его зовут "color", чтобы пройтись по всем цветам(red и blue) – нужно знать его размер "color.length". Каждый раз, когда запускается функция "colorFunction()", сначала она проверяет не хотим ли мы взять из массива элемент "color[colorIteraion]" у которого "colorIteraion" больше или равен размеру массива "color". Если больше/равно – ставим в ноль и как бы укажем на первый цвет. Далее ставит фон, увеличивает "colorIteraion" на один (инкрементирует).