8

Tengo un pequeño problema: Debo realizar dos semáforos, uno para la Calle 1 y otro para la Calle 2. Teniendo en cuenta que mientras esté verde en la Calle 1 en la Calle 2 debe estar rojo y viceversa.

Tengo un problema con los intervalos de tiempo, puesto que inician bien pero luego se van como acelerando y casi se juntan, hasta que se pierde la sincronización.

Les dejaré el código con HTML y JavaScript:

function start() {
  cambios(1);
  cambios(2);
}
function cambios(id) {

  var cont = 1;
  var bomb1;
  bomb1 = document.getElementById("bombillo"+id);

  function colorRojo() {
    if (cont == 1) {

      bomb1.style.background = "red";
      cont += 2;
    }
  }

  window.setInterval(colorRojo, 5000);
  window.clearInterval(colorRojo);

  function colorAmarillo() {

    if (cont == 2) {
      bomb1.style.background = "yellow";
      cont -= 1;
    }
  }
  window.setInterval(colorAmarillo, 5000);
  window.clearInterval(colorAmarillo);

  function colorVerde() {

    if (cont == 3) {

      bomb1.style.background = "green";
      cont -= 1;
    }
  }

  window.setInterval(colorVerde, 7000);
  window.clearInterval(colorVerde);
}
start()
#bombillo1 {
	height: 150px;
	width: 150px;
	background-color: green;
	border-radius: 50%;
	margin: 25px auto;
	transition: background 300ms;
}
#bombillo2 {
	height: 150px;
	width: 150px;
	background-color: red;
	border-radius: 50%;
	margin: 25px auto;
	transition: background 300ms;
}
<!-- jQuery usado como dependencia de Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<div class="bombillo" id="bombillo1"></div>
<div class="bombillo" id="bombillo2"></div>

<div class="btn-group"></div>

1
  • 1
    ¿Porqué dos hilos de ejecución por separado? Tienes 4 estados (verde1, amarillo1, verde2, amarillo2) que se suceden cíclicamente, basta con ir llamando sucesivamente al mismo método para calcular el siguiente estado y cambiar los colores de todos los semáforos simultáneamente. Lo que tu quieres hacer (dos "procesos" por separado que se ejecuten de forma coordinada sin coordinación entre ambos requieren de un sistema de tiempo real, y eso implica un HW y un SO específicos para sistemas de tiempo real.
    – SJuan76
    Commented el 7 mar. 2017 a las 11:28

2 respuestas 2

7

Yo te recomiendo hacer esto vía requestAnimationFrame ya que tiene muchas ventajas sobre setInterval/setTimeout. Algunas ventajas son un mejor FPS, gasta menos CPU y batería, entre otras. Además, si quieres sincronización entre ambos semáforos debes implementar el patrón Observador (también llamado pub/sub).

Ejemplo

class Observer {

  constructor() {
    this.observers = [];
  }

  subscribe(semaphore) {
    semaphore.observers.push(this);
  }

  publish() {
    this.observers.forEach(ob => ob.semaphoreChange(this.currentLight));
  }
}

class Semaphore extends Observer {

  constructor(id) {
    super();
    this.$el = document.querySelector(id);
    this.count = 0;
    this.rafid = 0;
    this.currentLight = '';
    this.breakpoints = {
      green: 5,
      red: 8,
      ambar: 10
    };
  }

  start() {
    this.rafid = requestAnimationFrame(this.loop.bind(this));
  }

  stop() {
    cancelAnimationFrame(this.rafid);
  }

  loop(currTime) {
    let time = Math.round(currTime / 1000) - this.count;

    if (time < this.breakpoints.green &&
      this.currentLight !== 'green') {
      this.currentLight = 'green';
      this.updateColor();
      this.publish();
    }

    if (time >= this.breakpoints.green &&
      time < this.breakpoints.red &&
      this.currentLight !== 'red') {
      this.currentLight = 'red';
      this.updateColor();
      this.publish();
    }

    if (time >= this.breakpoints.red &&
      time < this.breakpoints.ambar &&
      this.currentLight !== 'ambar') {
      this.currentLight = 'ambar';
      this.updateColor();
      this.publish();
    }

    if (time >= this.breakpoints.ambar) {
      this.count += time;
    }

    this.rafid = requestAnimationFrame(this.loop.bind(this));
  }

  updateColor() {
    this.$el.className = `semaphore ${this.currentLight}`;
  }

  semaphoreChange(color) {
    if (color === 'green') {
      this.$el.className = 'semaphore red';
    } else if (color === 'red') {
      this.$el.className = 'semaphore green';
    } else {
      this.$el.className = `semaphore ${color}`;
    }
  }
}

let semaphore1 = new Semaphore('#s1');
let semaphore2 = new Semaphore('#s2');

semaphore2.subscribe(semaphore1);
semaphore1.start();
@import url('https://fonts.googleapis.com/css?family=Oswald');


.container {
  height: 100vh;
  width: 100%;
}

.street {
  display: inline-block;
  height: 100%;
  margin-right: -4px;
  width: 50%;
}

h1 {
  color: #555;
  font-family: 'Oswald';
  margin: 20px 0;
  text-align: center;
}

.semaphore {
  border-radius: 100%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .23);
  height: 150px;
  margin: 50px auto;
  width: 150px;
}

.semaphore.green {
  background-color: #2ecc71;
}

.semaphore.red {
  background-color: #e74c3c;
}

.semaphore.ambar {
  background-color: #f39c12;
}
<div class="container">
  <section class="street street-1">
    <h1>Street 1</h1>
    <div id="s1" class="semaphore"></div>
  </section>
  <section class="street street-2">
    <h1>Street 2</h1>
    <div id="s2" class="semaphore"></div>
  </section>
</div>

La clase Observer solo implementa de manera básica el patrón Observador, definiendo los métodos subscribe para subscribirse a otro semáforo y el método publish para notificar a los semáforos "observadores" cuando se ha producido un cambio de luz.

La clase Semaphore como puedes observar no tiene nada fuera de lo común. La propiedad breakpoints son los "puntos de quiebre" en el que el semáforo debe cambiar. En este ejemplo, el verde durará 5, el rojo 3 y el ámbar 2.

3
  • Hola @Guz la clase observer la haces con javascript? Commented el 7 mar. 2017 a las 15:30
  • 1
    Claro, todo el código está en JavaScript ES6 (versión del 2015). Si quieres darle soporte a navegadores menos modernos solo copia el código y traspílalo con Babel para que te genere código JavaScript viejo.
    – gugadev
    Commented el 7 mar. 2017 a las 15:32
  • Excelente amigo mio, Esto me funciono de maravilla. muchas gracias ahora ya tengo dos metodos funcionales de como reslver eso y pues la logica para otro proyecto que lo requiera. Commented el 8 mar. 2017 a las 23:30
5

Te paso el script en JQuery:

var estado = 'verde';
var animation;
function fnSemaforo(){
    clearInterval(animation);
  var bombilla = $(".bombillo");
  var inAction = 0;
    if(estado === 'verde' && inAction===0){
      bombilla.css("background-color","yellow");
      estado = 'amarillo';
      inAction=1;
    }
    if(estado === 'amarillo' && inAction===0){
      bombilla.css("background-color","red");
      estado = 'rojo';
      inAction=1;
    }
    if(estado === 'rojo' && inAction===0){
      bombilla.css("background-color","green");
      estado = 'verde';
      inAction=1;
    }

    animation = window.setInterval("fnSemaforo()",500);
}

Sólo tienes que agregar la funcion fnSemaforo en el bloque ready, de la siguiente manera:

$(window).ready(function(){
    fnSemaforo();
})

Espero te sea de utilidad! Exitos!

edit: Agrego el codigo en JS puro, por si te hace falta:

var estado = 'verde';
var animation;
function test(){
    clearInterval(animation);
  var bombilla = document.getElementById("bombillo1");
  var inAction = 0;
    if(estado === 'verde' && inAction===0){
      bombilla.style.backgroundColor = "yellow";
      estado = 'amarillo';
      inAction=1;
    }
    if(estado === 'amarillo' && inAction===0){
      bombilla.style.backgroundColor = "red";
      estado = 'rojo';
      inAction=1;
    }
    if(estado === 'rojo' && inAction===0){
      bombilla.style.backgroundColor = "green";
      estado = 'verde';
      inAction=1;
    }

    animation = window.setInterval("test()",500);
}
7
  • No veo la etiqueta jQuery en su pregunta. Quizás el esté aprendiendo JavaScript y no necesita de librerías aún. Sería mejor proporcionar una respuesta en base a las preferencias del usuario.
    – gugadev
    Commented el 7 mar. 2017 a las 13:07
  • 1
    @Guz Si te fijás en el HTML, está incluyendo JQuery 3.3.1 min. Por eso mi respuesta en JQuery. Podes agregarle la etiqueta JQuery a la pregunta ;)
    – Maskter
    Commented el 7 mar. 2017 a las 13:11
  • 1
    Lo está agregando como dependencia de Bootstrap, pero en su código no lo usa. Dejémoslo así ;)
    – gugadev
    Commented el 7 mar. 2017 a las 13:12
  • 1
    @Guz agregué la alternativa en JS vainilla por las dudas! De paso, podrías ponerle un voto a mi respuesta :)
    – Maskter
    Commented el 7 mar. 2017 a las 13:16
  • Genial, mejor así ;)
    – gugadev
    Commented el 7 mar. 2017 a las 13:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.