0

Estoy creando diferentes cuentas regresivas que inicien al momento de interactuar con un click en el contenido “Eliminar”.

$(document).on('click', '.box > ul > li:nth-child(2)', function (event) {
    event.stopPropagation();
    var save_box = $(this).parent().parent().html()
    var aquiobj = $(this).parent().parent()
    setTimeout(function () {
        timer(aquiobj)
    }, 100);
    $(this).parent().parent().html('<div class="element"><p>Eliminando en...</p><span class="timeout">5</span><p>Cancelar</p>');
});

function timer(selector) {
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    var interval = setInterval(function () {
        sec--;
        if (sec >= 0) {
            self.find('span.timeout').text(sec);
        } else {
            clearInterval(interval);
            self.remove();
        }
    }, 1000);
}
.conten {
    text-align: center;
    font-family: 'Roboto';
  }
  .svg {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
  }
  .box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0px -20px 80px rgba(0, 0, 0, 0.12);
;

  border: 2px solid gray;
  min-height: 200px;
  width: 450px;
  background: white;
  border-radius: 5px;
  margin: 100px 5px 0 5px;
  cursor: pointer;
  transition: background-color .5s;
}

.box > a {
  margin: -10px 0 40px;
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .5s;
}

.box > a:hover, .box > a:focus, .box:hover a {
  background-size: 100% 2px;
}

.box:hover {
  background-color: rgba(238, 232, 170, 0.247);
}
.box > ul {
    list-style-type: none;
    padding: 0;
    width: 151px;
    background-color: #f1f1f1;
    margin: 30px 150px;
    position: absolute;
    border-radius:5%;
    opacity: 0;
    transition: opacity .5s;
    box-shadow: 0px -1px 20px -10px rgba(0,0,0,0.75);   
}

.box:hover > ul {
    opacity: 1;
}
 
.box > ul > li > a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }

.box > ul > li > a:hover {
    background-color: #383f3f50;
    color: white;
  }
<div class="conten">
<div class="svg">
    <div class="box">
    <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
    <a>Nuestra Sr. del Rosario</a><br>
</div>
<div class="box">
    <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
    <a>Santa Catalina</a><br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Como se observa cada cuenta regresiva es individual para cada card. Al llegar a “0” procede a eliminar la card enmarcada por la cuenta regresiva.

Hasta el momento todo funciona bien, el inconveniente surge cuando deseo cancelar una de las cuentas regresiva, haciendo click en el contenido “Cancelar”

$(document).on('click', '.box > ul > li:nth-child(2)', function (event) {
    event.stopPropagation();
    var save_box = $(this).parent().parent().html()
    var aquiobj = $(this).parent().parent()
    setTimeout(function () {
        timer(aquiobj)
    }, 100);
    $(this).parent().parent().html('<div class="element"><p>Eliminando en...</p><span class="timeout">5</span><p>Cancelar</p>');
    $("body").on('click', '.element > p:last-child', function () {
        $(this).parent().html(save_box)
    })
});

function timer(selector) {
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    var interval = setInterval(function () {
        sec--;
        if (sec >= 0) {
            self.find('span.timeout').text(sec);
        } else {
            clearInterval(interval);
            self.remove();
        }
    }, 1000);
}
.conten {
    text-align: center;
    font-family: 'Roboto';
  }
  .svg {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
  }
  .box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0px -20px 80px rgba(0, 0, 0, 0.12);
;

  border: 2px solid gray;
  min-height: 200px;
  width: 450px;
  background: white;
  border-radius: 5px;
  margin: 100px 5px 0 5px;
  cursor: pointer;
  transition: background-color .5s;
}

.box > a {
  margin: -10px 0 40px;
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .5s;
}

.box > a:hover, .box > a:focus, .box:hover a {
  background-size: 100% 2px;
}

.box:hover {
  background-color: rgba(238, 232, 170, 0.247);
}
.box > ul {
    list-style-type: none;
    padding: 0;
    width: 151px;
    background-color: #f1f1f1;
    margin: 30px 150px;
    position: absolute;
    border-radius:5%;
    opacity: 0;
    transition: opacity .5s;
    box-shadow: 0px -1px 20px -10px rgba(0,0,0,0.75);   
}

.box:hover > ul {
    opacity: 1;
}
 
.box > ul > li > a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }

.box > ul > li > a:hover {
    background-color: #383f3f50;
    color: white;
  }
<div class="conten">
<div class="svg">
    <div class="box">
    <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
    <a>Nuestra Sr. del Rosario</a><br>
</div>
<div class="box">
    <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
    <a>Santa Catalina</a><br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


En un principio parecer funcionar, pero el contador sigue transcurriendo y al cambo de unos segundos la card se elimina, lo cual no debería de suceder.

Mi pregunta es, ¿como puedo solucionar esto?; Acaso es posible cancelar un `setInterval` especifico con `clearInterval()` sin necesidad de afectar las demás cunetas regresivas que estén en marcha.
2
  • Pero te falta un evento que responda al click en eliminar una vez que empezó la cuenta regresiva...
    – Alex
    Commented el 1 jul. 2020 a las 21:59
  • Hey Alex, el evento esta en el segundo fragmento de código que publique.
    – Link_HG
    Commented el 1 jul. 2020 a las 22:07

1 respuesta 1

0

Estas muy cerca de lograrlo, solamente te falta almacenar el identificador del interval que estás generando para que cuando des click en cancelar se limpie el interval con ese identificador.

Así:

$(document).on('click', '.box > ul > li:nth-child(2)', function (event) {
  event.stopPropagation();
  var save_box = $(this).parent().parent().html()
  var aquiobj = $(this).parent().parent()
  var intervalId; // Variable para almacenar el Identificador del interval

  setTimeout(function () {
      intervalId = timer(aquiobj);
  }, 100);
  $(this).parent().parent().html('<div class="element"><p>Eliminando en...</p><span class="timeout">5</span><p>Cancelar</p>');
  $("body").on('click', '.element > p:last-child', function () {
      $(this).parent().html(save_box);
      clearInterval(intervalId); // Limpiar el interval cuando sucede el click
  })
});

function timer(selector) {
  var self = $(selector);
  var sec = parseInt(self.find('span.timeout').text());
  var interval = setInterval(function () {
      sec--;
      if (sec >= 0) {
          self.find('span.timeout').text(sec);
      } else {
          clearInterval(interval);
          self.remove();
      }
  }, 1000);

  return interval; // Retornar el identificador para tenerlo disponible por fuera
}
.conten {
  text-align: center;
  font-family: 'Roboto';
}
.svg {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
}
.box {
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0px -20px 80px rgba(0, 0, 0, 0.12);
;

border: 2px solid gray;
min-height: 200px;
width: 450px;
background: white;
border-radius: 5px;
margin: 100px 5px 0 5px;
cursor: pointer;
transition: background-color .5s;
}

.box > a {
margin: -10px 0 40px;
display: inline-block;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .5s;
}

.box > a:hover, .box > a:focus, .box:hover a {
background-size: 100% 2px;
}

.box:hover {
background-color: rgba(238, 232, 170, 0.247);
}
.box > ul {
  list-style-type: none;
  padding: 0;
  width: 151px;
  background-color: #f1f1f1;
  margin: 30px 150px;
  position: absolute;
  border-radius:5%;
  opacity: 0;
  transition: opacity .5s;
  box-shadow: 0px -1px 20px -10px rgba(0,0,0,0.75);   
}

.box:hover > ul {
  opacity: 1;
}

.box > ul > li > a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.box > ul > li > a:hover {
  background-color: #383f3f50;
  color: white;
}
<div class="conten">
    <div class="svg">
        <div class="box">
        <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
        <a>Nuestra Sr. del Rosario</a><br>
    </div>
    <div class="box">
        <ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
        <a>Santa Catalina</a><br>
    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

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.