Как сделать так что бы функция активировалась сразу за предыдущей?

Question

[Валентин Бируля]

У меня есть "Светофор" и я не могу понять как сделать так что бы сигналы зажигались не сразу а по очереди
Вот код

$(function (){
	function red(){
		function changeFontRed() // Черный сменяется на Красный
		{
			$('#red').toggleClass('red-black');
			$('#red').toggleClass('red');
		} 
		setTimeout(changeFontRed, 1500 )
	}	
	function yellow(){
		function changeFontYellow() // Черный сменяется на Желтый
		{
			$('#yellow').toggleClass('yellow-black');
			$('#yellow').toggleClass('yellow');
		} 
		setTimeout(changeFontYellow, 1500 )	
	}
	function green(){
		function changeFontGreen() // Черный сменяется на Зеленый
		{
			$('#green').toggleClass('green-black');
			$('#green').toggleClass('green');
		} 
		setTimeout(changeFontGreen, 1500 )	
	}
	setTimeout(red,0)
	setTimeout(yellow,0)
	setTimeout(green,0)

});

Я понимаю что можно сделать очередь по средствам увеличение Timeout.Но мне кажется это не правильно и я бы хотел узнать как это делается правильно .

Заранее спасибо :)

Answer 1

[scottparker]

а сделать вызов следующей функции в конце предыдущей не вариант?
и у тебя 3 одинаковые функции, их можно заменить одной в которой будет, передаваться параметр цвета, по которому ты будешь обращаться к элементу

Answer 2

[Дмитрий Беляев]

Вам нужно запускать следующий таймер из колбэка предыдущего
что-то вроде такого:

$(function (){
  var toRed = true;
  function red(){
    function changeFontRed() // Черный сменяется на Красный
    {
      $('#red').toggleClass('red-black');
      $('#red').toggleClass('red');
      yellow();
    } 
    setTimeout(changeFontRed, 1500 )
  }	
  function yellow(){
    function changeFontYellow() // Черный сменяется на Желтый
    {
      $('#yellow').toggleClass('yellow-black');
      $('#yellow').toggleClass('yellow');
      if(toRed) { red(); }
      else { green(); }
      toRed = !toRed; // для желтого будем менять направление по этой переменной
    } 
    setTimeout(changeFontYellow, 1500 )	
  }
  function green(){
    function changeFontGreen() // Черный сменяется на Зеленый
    {
      $('#green').toggleClass('green-black');
      $('#green').toggleClass('green');
      yellow();
    } 
    setTimeout(changeFontGreen, 1500 )	
  }
  green(); // сразу зажигаем только 1 из цветов
});

Comments

[Валентин Бируля]

Cпасибо большое,буду разбираться

Answer 3

[kn1ght_t]

я бы сделал через промис:

const makeColor = ({selector, startClass = 'black', endClass, timeOut = 1000, }, i = 0) =>
	() => new Promise((resolve) => {
      setTimeout(() => {
        const node = document.querySelector(selector);
        const isEven = i % 2 === 0;

        node.classList.remove(isEven ? startClass : endClass);
        node.classList.add(isEven ? endClass : startClass);
        i++;

        resolve();
      }, timeOut)
    });

const red = makeColor({selector: '.red-item', endClass: 'red'});
const green = makeColor({selector: '.green-item', endClass: 'green'});
const yellow = makeColor({selector: '.yellow-item', endClass: 'yellow'});

red()
	.then(green)
	.then(yellow);

demo: https://jsfiddle.net/4d2g3h69/