JQuery Slide Transition Bug

Navigation
0

I'm venturing into the front-end and I have a problem with multiple clicks followed by the side arrows on the slide that I've created, where the user waits for about a second to move to the next slide everything happens right, however, if you quickly click the buga transition and a new div is added underneath the existing one. I already tried using off() and stop(true, true) but it did not work. 

$(function() {

  var slides = $('.slide-vinho');

  var count = 0;
  var slideAtual = slides.eq(0);

  function escondeSlides(count) {
    for (var aux = 0; aux < slides.length; aux++) {
      if (aux != count) {
        slides.eq(aux).hide();
      }
    }
  }

  escondeSlides(0);

  function fazTrocaSlide(count) {
    console.log(count);
    slideAtual.stop(true, true).fadeOut('fast', function() {
      slides.eq(count).stop(true, true).fadeIn('fast', function() {
        slideAtual = slides.eq(count);
      });
    });

    var valorLeftBox = (count) * 14.28;
    $('#background-box-navigation').animate({
      left: valorLeftBox + '%'
    }, 'fast');
    valorLeftBox = 0;
  };

  $('.seta-navegacao').off().stop(true, true).on('click', function() {
    var whichButton = $(this).attr('id');

    if (whichButton == "seta-direita") {
      count++;
      if (count > slides.length - 1) {
        count = 0;
      }
    } else {
      count--;
      if (count < 0) {
        count = slides.length - 1;
      }
    }
    fazTrocaSlide(count);
  });

});
.garrafa-vinho {
  height: 680px;
}

.slide-vinho {
  display: flex;
  flex-wrap: nowrap;
}

.slide-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../img/fundo-vinhos.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.texto-esquerda {
  position: relative;
  width: 50%;
  text-align: right;
  padding-top: 70px;
  padding-right: 16px;
}

.texto-esquerda h2 {
  font-family: 'Copperplate Gothic';
  font-weight: bold;
}

.descricao {
  position: absolute;
  top: 50%;
  padding-left: 30%;
  padding-right: 16px;
  text-align: justify;
  text-indent: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.texto-direita {
  align-self: center;
  width: 50%;
  line-height: 60px;
}

.icon {
  width: 42px;
  height: 42px;
  vertical-align: middle;
  margin-left: 16px;
  margin-right: 6px;
}

#seta-esquerda {
  width: 56px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 40px;
  transition: background-color .35s ease-in-out;
  -moz-transition: background-color .35s ease-in-out;
  -webkit-transition: background-color .35s ease-in-out;
  z-index: 2;
}

#seta-esquerda:hover {
  cursor: pointer;
}

#seta-direita {
  width: 56px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-right: 40px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: background-color .35s ease-in-out;
  -moz-transition: background-color .35s ease-in-out;
  -webkit-transition: background-color .35s ease-in-out;
}

#seta-direita:hover {
  cursor: pointer;
}

.slide-navigation {
  position: relative;
  display: flex;
  justify-content: space-around;
  background-color: #261a0b;
}

.slide-navigation>img {
  transition: opacity .35s ease-in-out;
  -moz-transition: opacity .35s ease-in-out;
  -webkit-transition: opacity .35s ease-in-out;
  z-index: 1;
}

.slide-navigation>img:hover {
  cursor: pointer;
  opacity: 0.5;
}

#background-box-navigation {
  position: absolute;
  width: 14.28%;
  height: 100%;
  left: 0;
  background-color: #975032;
  z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="slide-wrapper">
  <img id="seta-esquerda" class="seta-navegacao" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-64.png"><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br/>
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div><divclass="slide-vinho">
    <div class="texto-esquerda">
      <h2>
        Merlot
      </h2>
      <div class="descricao">
        <p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p>
        <br />
        <p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
        <a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
      </div>
    </div>
    <img class="garrafa-vinho" src="http://via.placeholder.com/150x300"alt="merlot-riguardo">
    <div class="texto-direita">
      <ul>
        <li>
          <img class="icon" src="http://via.placeholder.com/50x50">100%Merlot</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">2012|2013</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Nítido|Varietal</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Frutasvermelhas|Especiarias</li><li><imgclass="icon" src="http://via.placeholder.com/50x50">Rubiintenso</li></ul></div></div></div><imgid="seta-direita" class="seta-navegacao" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-64.png"alt="seta_direita">
</div>

<div class="slide-navigation">

  <img src="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><imgsrc="http://via.placeholder.com/50x100"><divid="background-box-navigation"></div>
</div>

Surely there must be better ways to do this and I accept suggestions. Follow the fiddle :

JSFiddle

    
asked by anonymous 14.03.2018 / 13:11

1 answer

0

I was able to solve it quite simply, I just added a% control% variable that verifies whether the operation is active or not. Ex: 

$(function(){

var slides = $('.slide-vinho');

var count = 0;
var slideAtual;
var active = false; // <- variável criada

function escondeSlides() {
    for (var aux = 0; aux < slides.length; aux++) {
        slides.eq(aux).hide();
    }
}

escondeSlides();
slideAtual = slides.eq(0);
slideAtual.fadeIn('fast');

function fazTrocaSlide(count) {

    console.log(count);
    slideAtual.fadeOut('fast', function(){
        slides.eq(count).fadeIn('fast', function(){
            slideAtual = slides.eq(count);
            active = false; // aqui no final das animações, reseto a variável
        });
    });

    var valorBox = (count) * 14.28;
    $('#background-box-navigation').animate({
        left: valorBox+'%'}, 'fast');
    valorBox = 0;
};

$('.seta-navegacao').on('click', function() {
    if (active) { // aqui verifico se há uma animação em andamento
        return;   // caso haja, o método para por aqui.

    }
    active = true; // torna-se ativa

    var whichButton = $(this).attr('id');

    if (whichButton == "seta-direita") {
        count++;
        if (count > slides.length-1) {
            count = 0;
        }
    } else {
        count--;
        if (count < 0) {
            count = slides.length-1;
        }
    }
    fazTrocaSlide(count);
});

$('.slide-navigation img').on('click', function() {
    count = $('.slide-navigation img').index(this);
    fazTrocaSlide(count);
});
});
    
15.03.2018 / 14:31
Authentication with js node and passports using GCF Resolving non-angular promise