Skip to main content
1 de 3

Es muy sencillo, agrega a tu clase una propiedad o atributo llamada encendido de tipo booleano con valor por defecto en false.

Al momento de llamar a girarAspas() estableces su valor a true, y sólo lo cambias a false cuando la perilla está en el estado de apagado (i = 3).

Cuando presionas en la perilla de girar la rejilla, verificas el estado de la propiedad encendido, si la misma es false retornas (sales) de la función sin hacer nada más, y si la misma es true puedes encender el giro de la rejilla.

Por ejemplo:

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
            this.encendido = false;
            ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Espero que esto te ayude a resolver el problema.