Как реализовать моргающую лампу?

Question

[Ростислав Сергеевич]

Привет.
В DOM есть объект - лампа. Она состоит из png лампы и png её света. Нужно сделать асинхронную реализацию так, чтобы этот свет исчезал на доли секунды каждый "рандомный" момент времени (от 1 до 3 секунд). setInterval с Math.random() работает криво, и получается, что лампа сначала очень быстро моргает, потом свет появляется и перестаёт исчезать.

Если интересно, я делаю вот так:

var numInterval = setInterval(lampSwitch, Math.floor(Math.random(1, 3)) * 1000);

function lampSwitch() {
	$('.lampShadow').css({
		'display': 'none'
	});
	setTimeout(function() {
		$('.lampShadow').css({
			'display': 'block'
		});
	}, 600)
};

Comments

[Bhudh]

А давно ли Math.random обращает внимание на переданные параметры?
Нужная Вам функция: второй пример по ссылке — getRandomArbitrary(min, max).

Answer 1

[Stalker_RED]

Главная ошибка у вас в первой строке.
Выражение Math.floor(Math.random(1, 3)) * 1000 вычисляется один раз при запуске, и потом только с этим интервалом и работает.

Я бы делал немножко по другому: несколько флагов, которые переключаются независимыми таймерами, через 300, 500, 700 миллисекунд, например (основано на ряде простых чисел).

Когда все три флага совпали - моргаем лампочкой. Такие таймеры дадут довольно длинную псевдослучайную последовательность без очевидных шаблонных повторений.

(function(){
	var a = b = c = true, lamp = document.querySelector('.lamp')
  setInterval(function(){
    if (a && b && c) {
      lamp.classList.add('off')
      setTimeout(function(){
        lamp.classList.remove('off')
      }, 40) // это три кадра при 60 fps
    }
  }, 200)
  
  setInterval(function(){ a = !a }, 300)
  setInterval(function(){ b = !b }, 500)
  setInterval(function(){ c = !c }, 700)
})()

числа в таймерах можно подправить на свой вкус
https://jsfiddle.net/wo78t98z/

UPD: Вариант на css
У враппера желтый фон, поверх два прозрачных псевдоэлемента и пнг-шка с лампочкой.
У псевдоэлементов и пнг-шки независимые таймеры, которые кратковременно моргают черным.

.lamp::before,
.lamp::after {
  background: transparent;
  animation: blink 7.5s step-start infinite;
}
.lamp::after {
  animation-duration: 13s;
}
.lamp img {
  animation: blink 3s step-start infinite;
}

@keyframes blink {
  0%, 1% { background: #000; }
  100% { background: transparent; }
}

https://jsfiddle.net/wo78t98z/1/

Comments

[Ростислав Сергеевич]

Спасибо. А что насчёт не главных ошибок?

[Stalker_RED]

Ростислав Сергеевич: Да там весь сок в первой строке.
Math.random возвращает число в диапазоне от 0 до 1, вы его умножаете на тысячу - получается что-то от нуля до тысячи. Тысяча секунд - это 33 минуты. В итоге ваша lampSwitch может вызываться как раз в несколько секунд, так и раз в пол часа, например.

[Ростислав Сергеевич]

Stalker_RED: странно. Я почему-то всё это время считал, что в js время задаётся в тиках, а не в секундах.

[Stalker_RED]

Ростислав Сергеевич: В миллисекундах.

[Ростислав Сергеевич]

Stalker_RED: окей.

Math.random возвращает число в диапазоне от 0 до 1, вы его умножаете на тысячу - получается что-то от нуля до тысячи. Тысяча секунд - это 33 минуты.

Здесь вы пишите, что в секундах. Возможно это я туплю, и если это так, то соррируйте.

[Stalker_RED]

Ростислав Сергеевич: Нет, это я туплю, и все еще хуже.
Math.random возвращает число в диапазоне от 0 до 1, вы его округляете вниз (получается ноль!) и умножаете ноль на тысячу (получается снова-же ноль).
В результате lampSwitch в хроме вызывается через каждые 4мс (250 раз в секунду) а в ие не вызывается вообще. Почем оно один раз только моргает а потом непрерывно светится - сложно сказать. Таймеры скорее всего отрабатывают пачками, и видимо так совпадает, что практически всегда она светится.

Answer 2

[Хуршед Абдужалил]

как вариант рекурсию сделать в вашей же функции lampSwitch

Comments

[Ростислав Сергеевич]

Мне нужно асинхронное решение. Если я сделаю рекурсию, то остальной код js не будет работать